display: sticky

by hideki_a

HTML

<table>
<thead>
<tr>
<th scope="col">名称</th>
<th scope="col">内容</th>
<th scope="col">価格</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">商品1</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品2</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品3</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品4</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品5</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品6</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品7</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品8</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品9</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品10</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品11</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品12</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品13</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品14</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品15</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品16</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品17</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品18</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
<tr>
<th scope="row">商品19</th>
<td>商品内容が入ります。</td>
<td>¥300</td>
</tr>
</tbody>
</table>

CSS

table,
th,
td{
    border-style: solid;
    border-color: #999;
}

table{
    border-width: 1px 0 0 1px;
    border-collapse: collapse;
}

th,
td{
    padding: 5px;
    border-width: 0 1px 1px 0;
}

thead{
    position: sticky;
    top: 0px;
    background-color: #efefef;
}