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>

失敗例

外側、テーブル、セルでそれぞれの幅指定をミスるとうまくいかない場合がある

動作例

上述のコード通りではないが、こんなイメージ

参考

https://web.runland.co.jp/frontend/post-6084

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

プロフィール・経歴