🖥

Tailwind CSS - テーブルで左二列以上を固定して、その他の列はスクロールさせる (列幅は完全に固定するパターン)

2024/03/14に公開

CSS

HTML

Tailwind CSS

tech

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>