CSS「position: sticky」を使って「table」(表)の見出しを固定。

ホームページで表を実装する際に、項目が多すぎて一度に全体を見渡せない時があります。スクロールすれば確認できますが、見出し項目を固定することで使いやすくなるため、実装方法をメモ。

HTML

<table>
<tr>
<th>項目名1</th>
<th>項目名2</th>
<th>項目名3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
<tr>
<td>データ1-3</td>
<td>データ2-3</td>
<td>データ3-3</td>
</tr>
<tr>
<td>データ1-4</td>
<td>データ2-4</td>
<td>データ3-4</td>
</tr>
<tr>
<td>データ1-5</td>
<td>データ2-5</td>
<td>データ3-5</td>
</tr>
<tr>
<td>データ1-6</td>
<td>データ2-6</td>
<td>データ3-6</td>
</tr>
<tr>
<td>データ1-7</td>
<td>データ2-7</td>
<td>データ3-7</td>
</tr>
<tr>
<td>データ1-8</td>
<td>データ2-8</td>
<td>データ3-8</td>
</tr>
<tr>
<td>データ1-9</td>
<td>データ2-9</td>
<td>データ3-9</td>
</tr>
</table>

CSS

tabel th {
	position: sticky;
	top: 0;
}

固定したい項目に「position: sticky」を設定し、固定位置をtop（right、bottom、left）で記載。
上記に場合は枠の上段に固定される。

• CSSで見出し固定＋レスポンシブ対応の表を作成