Tailwind CSS – テーブル1行目のヘッダ行を固定しつつ部分スクロールさせる

HTML例

• テーブルの外側の要素に高さを指定する
• テーブルヘッダのセルに top-0 sticky を指定する

<div class="h-52 overflow-scroll text-5xl">
  <table class="bg-gray-100">
    <thead>
      <tr>
        <th class="sticky top-0 bg-yellow-200">HEAD A</th>
        <th class="sticky top-0 bg-green-200">HEAD B</th>
        <th class="sticky top-0 bg-blue-200">HEAD C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>BODY A 1</td>
        <td>BODY B 1</td>
        <td>BODY C 1</td>
      </tr>
      <tr>
        <td>BODY A 2</td>
        <td>BODY B 2</td>
        <td>BODY C 2</td>
      </tr>
      <tr>
        <td>BODY A 3</td>
        <td>BODY B 3</td>
        <td>BODY C 3</td>
      </tr>
      <tr>
        <td>BODY A 4</td>
        <td>BODY B 4</td>
        <td>BODY C 4</td>
      </tr>
      <tr>
        <td>BODY A 5</td>
        <td>BODY B 5</td>
        <td>BODY C 5</td>
      </tr>
      <tr>
        <td>BODY A 6</td>
        <td>BODY B 6</td>
        <td>BODY C 6</td>
      </tr>
      <tr>
        <td>BODY A 7</td>
        <td>BODY B 7</td>
        <td>BODY C 7</td>
      </tr>
      <tr>
        <td>BODY A 8</td>
        <td>BODY B 8</td>
        <td>BODY C 8</td>
      </tr>
      <tr>
        <td>BODY A 9</td>
        <td>BODY B 9</td>
        <td>BODY C 9</td>
      </tr>
      <tr>
        <td>BODY A 10</td>
        <td>BODY B 10</td>
        <td>BODY C 10</td>
      </tr>
    </tbody>
  </table>
</div>

動作例

https://play.tailwindcss.com/D2teDEGTfT

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

プロフィール・経歴

https://github.com/YumaInaura/YumaInaura

公開日時

2024-03-15