テーブルヘッダ固定・Table Header Fixed - CSS - Mippy.jp

HTML

<div>
<table>
<thead>
<tr><th>title</th><th>description</th></tr>
</thead>
<tbody>
<tr><td>aaaa</th><th>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>bbbb</th><th>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>cccc</th><th>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>dddd</th><th>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>eeee</th><th>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>ffff</th><th>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

</tbody>
</table>
</div>

CSS

div{overflow-y:auto}
th{position:sticky;top:0;}

Sample

Important Point

[border-collapse: separate] OK

[border-collapse: collapse;] Bad: Line is not displayed