🖥
Tailwind CSS だけでテーブルの縦横２列を固定してスクロールできるようにする
動作例
HTML例
- テーブル内の全てのセルには最大幅・最小幅を指定して、セルの幅を固定している。
- テーブル内の全てのセルにはフォントサイズ・余白を設定してセルの高さを固定している。なぜならテーブルセルの仕様的にセル自体に高さを直接指定できないため。
- 固定するセルには全て sticky を指定する
- 2行目の固定行ではセルの固定縦幅分のtopを指定して表示位置を下にずらしている
- 2列目の固定列ではセルの固定縦幅分のleftを指定して表示位置を右にずらしている
- 固定するセルには背景色を指定して、他のセルが重なった時に文字が透けて重ならないようにしている
- それぞれのセルに必要な z-index ( z-数字 ) を指定して表示の優先度をつけ、セルが重なった時の制御をしている
<!-- テーブル全体の幅・高さ・スクロール指定 -->
<div class="h-[240px] w-[480px] overflow-scroll">
<table class="border-collapse text-center text-[1rem] leading-4">
<thead>
<!-- テーブルヘッダの1行目 -->
<tr>
<!-- テーブルヘッダ1行目 > 左から1個目のセル -->
<!-- top / left は 0 -->
<!-- z-index 指定は最優先 -->
<th
class="sticky left-0 top-0 z-30 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]"
>
cell_01-01
</th>
<!-- テーブルヘッダ1行目 > 左から2個目のセル -->
<!-- 固定幅分の left を指定して右に位置をずらしている -->
<!-- z-index 指定は最優先 -->
<th
class="sticky left-[6rem] top-0 z-30 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]"
>
cell_01-02
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-03
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-04
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-05
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-06
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-07
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-08
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-09
</th>
<th class="sticky top-0 z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_01-10
</th>
</tr>
<tr>
<!-- テーブルヘッダ2行目 > 左から1個目のセル -->
<!-- 固定縦幅分の top を指定して下に位置をずらしている -->
<!-- z-index 指定は最優先 -->
<th
class="sticky left-0 top-[2rem] z-30 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]"
>
cell_02-01
</th>
<!-- テーブルヘッダ2行目 > 左から2個目のセル -->
<!-- 固定縦幅分の top を指定して下に位置をずらしている -->
<!-- z-index 指定は最優先 -->
<th
class="sticky left-[6rem] top-[2rem] z-30 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]"
>
cell_02-02
</th>
<!-- テーブルヘッダ2行目 > 左から3列目以降の全てのセル -->
<!-- 横の位置は固定するが、縦の位置は固定しない -->
<!-- z-index 指定の優先度は2番目 -->
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-03
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-04
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-05
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-06
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-07
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-08
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-09
</th>
<th class="sticky top-[2rem] z-20 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-pink-200 p-[0.5rem]">
cell_02-10
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_03-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_03-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_03-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_04-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_04-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_04-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_05-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_05-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_05-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_06-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_06-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_06-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_07-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_07-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_07-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_08-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_08-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_08-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_09-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_09-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_09-10</td>
</tr>
<tr>
<td class="sticky left-0 z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]">
cell_10-01
</td>
<td
class="sticky left-[6rem] z-10 max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] bg-blue-200 p-[0.5rem]"
>
cell_10-02
</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-03</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-04</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-05</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-06</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-07</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-08</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-09</td>
<td class="max-h-[2rem] min-h-[2rem] min-w-[6rem] max-w-[6rem] p-[0.5rem]">cell_10-10</td>
</tr>
</tbody>
</table>
</div>
参考
素のCSSで組まれた「CSSだけでテーブルの縦横２列を固定してスクロールできるようにする」のサンプルを参考に、Tailwind CSSに置き換えて試してみた
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
プロフィール・経歴
公開日時
2024-03-15
Discussion