Zenn
🥥

【CSS】tableのヘッダーを固定して縦スクロールするメモ

2023/10/20に公開
CSS
HTML
tech

th,tdを幅指定したがレイアウトがぐちゃる

調べていたらtheadとtbodyをblock要素にして、tbodyにoverflow-y:auto;を付与する方法があったのでやってみました。

<div style="width:500px; height:300px; border-width: 1px;">
  <table style="width:100%; text-align: left;border: 1px solid black; table-layout: fixed;border-collapse: collapse;">
    <thead style="width:100%;display:block;">
      <tr style="width:500px;">
        <th style="width:25%; border: 1px solid black;">ユーザー名</th>
        <th style="width:25%; border: 1px solid black;">メールアドレス</th>
        <th style="width:25%; border: 1px solid black;">部署</th>
        <th style="width:25%; border: 1px solid black;">役職</th>
      </tr>
    </thead>
    <tbody style="width:100%;display:block; max-height:50px; overflow-x: hidden; overflow-y: auto;">
      <tr style="width:500px;">
        <td style="width:25%; border: 1px solid black;">田中太郎</td>
        <td style="width:25%; border: 1px solid black;">tana@aa.aa</td>
        <td style="width:25%; border: 1px solid black;">総務</td>
        <td style="width:25%; border: 1px solid black;">部長</td>
      </tr>
      <tr style="width:500px;">
        <td style="width:25%; border: 1px solid black;">山本次郎</td>
        <td style="width:25%; border: 1px solid black;">yama@bb.bb</td>
        <td style="width:25%; border: 1px solid black;">経理</td>
        <td style="width:25%; border: 1px solid black;">係長</td>
      </tr>
      <tr style="width:500px;">
        <td style="width:25%; border: 1px solid black;">山田三郎</td>
        <td style="width:25%; border: 1px solid black;">yama@cc.cc</td>
        <td style="width:25%; border: 1px solid black;">営業</td>
        <td style="width:25%; border: 1px solid black;">主任</td>
      </tr>
    </tbody>
  </table>
</div>

tbodyにoverflow-x: hidden;としているのは、スクロールバーが表示されたときにtheadとtbodyでスクロールバーの幅分幅がずれるのを隠すためです。
th、td要素の幅を任意に固定したかったのですが、以下のように右側に変な隙間ができてうまくいきませんでした。

解決法

theadとtbodyのtr要素にdisplay:flex;を加えることで思った表示になりました。

<div style="width:500px; height:300px; border-width: 1px;">
  <table style="width:100%; text-align: left;border: 1px solid black; table-layout: fixed;border-collapse: collapse;">
    <thead style="width:100%;display:block;">
-     <tr style="width:500px;">
+     <tr style="display:flex;  width:500px;">
        <th style="width:25%; border: 1px solid black;">ユーザー名</th>
        <th style="width:25%; border: 1px solid black;">メールアドレス</th>
        <th style="width:25%; border: 1px solid black;">部署</th>
        <th style="width:25%; border: 1px solid black;">役職</th>
      </tr>
    </thead>
    <tbody style="width:100%;display:block; max-height:50px; overflow-x: hidden; overflow-y: auto;">
-     <tr style="width:500px;">
+     <tr style="display:flex;  width:500px;">
        <td style="width:25%; border: 1px solid black;">田中太郎</td>
        <td style="width:25%; border: 1px solid black;">tana@aa.aa</td>
        <td style="width:25%; border: 1px solid black;">総務</td>
        <td style="width:25%; border: 1px solid black;">部長</td>
      </tr>
-     <tr style="width:500px;">
+     <tr style="display:flex;  width:500px;">
        <td style="width:25%; border: 1px solid black;">山本次郎</td>
        <td style="width:25%; border: 1px solid black;">yama@bb.bb</td>
        <td style="width:25%; border: 1px solid black;">経理</td>
        <td style="width:25%; border: 1px solid black;">係長</td>
      </tr>
-     <tr style="width:500px;">
+     <tr style="display:flex;  width:500px;">
        <td style="width:25%; border: 1px solid black;">山田三郎</td>
        <td style="width:25%; border: 1px solid black;">yama@cc.cc</td>
        <td style="width:25%; border: 1px solid black;">営業</td>
        <td style="width:25%; border: 1px solid black;">主任</td>
      </tr>
    </tbody>
  </table>
</div>

そのほかtheadをstickyにする方法などもあるみたいです。
https://qiita.com/orangain/items/6268b6528ab33b27f8f2

Discussion