Header Fixed Table

一直以來如何讓Table的Header固定在最上方，這個問題困擾了我好久。

從前，我都是將Header以及Body分成兩個Table。並將table-layout設定成fixed。並個別設定每一列(column)的寬度。

所幸這次TailwindCSS的v3.1的更新文件，意外地讓我知道position: sticky;這個屬性。

只要在th上設定position: sticky;，還要記得top, bottom, left, right等位置屬性。指定header要黏在哪裡。

需要注意的是，有sticky屬性的話，祖先元素必須有一個是具有scrollbar機制的。

這樣的話有sticky的元素就會在使用top等屬性指定的位置被”黏住”

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3

<div>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>

table thead tr th {
  position: sticky;
  top: 0px;
  z-index: 10;
  background: #000;
}

div {
  height: 100px;
  overflow-y: scroll;
}