🖥
Tailwind CSS - テーブルで左二列以上を固定して、その他の列はスクロールさせる (列幅は完全に固定するパターン)
HTMLの例
- テーブルより外側の要素に
overflow-autoを指定する - 固定する列のセルに
stickyを指定する - 固定列セルの
leftの指定は、1列ごとに、列の幅分増やして行く ( たとえばすべての列幅が100pxなら、1列目は0px/ 2列目は100px... というように ) - 背景色を指定しないと非固定列と固定列が重なった時に文字が透けてかぶってしまうので、固定列のセルには背景色を指定する
- テーブルセルの幅指定は特殊なので
w-ではなくmin-w-max-w-で指定すると良さそうだ
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<div class="overflow-auto">
<table class="w-full">
<tr>
<td class="sticky left-0 min-w-[100px] max-w-[100px] overflow-hidden bg-yellow-200">AAAA</td>
<td class="sticky left-[100px] min-w-[100px] max-w-[100px] overflow-hidden bg-green-200">BBBB</td>
<td class="sticky left-[200px] min-w-[100px] max-w-[100px] overflow-hidden bg-blue-200">CCCCCCCCCCCCCCC</td>
<td class="w-[150px]">DDDDDDDDDDDDDD</td>
<td class="w-[150px]">EEE</td>
<td class="w-[150px]">FFFFFFF</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">*********************</td>
<td class="w-[150px]">XXXXXX</td>
<td class="w-[150px]">YYYYY</td>
<td class="w-[150px]">ZZZZZZZZZZZZZZZZZZZZZZ</td>
</tr>
</table>
</div>
</div>
</body>
</html>
失敗例
- 外側、テーブル、セルでそれぞれの幅指定をミスるとうまくいかない場合がある
動作例
上述のコード通りではないが、こんなイメージ
参考
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
プロフィール・経歴
公開日時
2024-03-13
Discussion