スマートフォンで「overflow-x」が効かない時の対処法
スライドアニメーションの使用等で画面全体をマスクしたい時に、「overflow-x」を使…
ホームページで表を実装する際に、項目が多すぎて一度に全体を見渡せない時があります。スクロールすれば確認できますが、見出し項目を固定することで使いやすくなるため、実装方法をメモ。
<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>
tabel th {
position: sticky;
top: 0;
}
固定したい項目に「position: sticky」を設定し、固定位置をtop(right、bottom、left)で記載。
上記に場合は枠の上段に固定される。