💡

table タグに CSS grid を適用する (subgrid)

らんす🍐

2024/07/21に公開

tableタグでカラム幅を制御する場合は、gridを使うと細かく制御できるため、
以下の記事にもあるように display: contents; を利用してgridを適用していました。

`display: contents;`の問題点

display: contents; を tableで利用する場合は、以下のような問題があります。

thead, tbody, tfoot, tr などに背景色やボーダーが設定できない。
tr に背景色が設定できないため、行hoverなどが簡単に設定できない。
tr にtabIndexを設定してもフォーカスできないブラウザがある。

subgrid を利用することで、上記の問題はすべてクリアできます。

subgridについては、以下の記事がわかりやすかったです。

`subgrid` を用いたtable layout

▼実際のサンプル

display: contents; を設定していた箇所に、grid-template-columns: subgrid;とgrid-column: 1 / -1;を設定することで同じ挙動にすることができます。

/** レイアウトの調整 */
table {
  display: grid;
  grid-template-columns: repeat(5, auto);

  tr,
  tbody,
  thead,
  tfoot {
    display: grid;
    /** 親のGridを利用する */
    grid-template-columns: subgrid;
     /** すべてのGrid Columnを利用する */
    grid-column: 1 / -1;
  }

  th,
  td {
    display: block;
  }
}

subgridを利用することで、以下のように thead や tr にも背景色が設定できるようになります。

/** 見た目のカスタマイズ */
table {
  border: var(--border);
  border-radius: 8px;
  overflow: clip;

  thead {
    background-color: #ddd;
  }

  tbody {
    background-color: #f9f9f9;

    tr {
      transition: background-color 0.3s ease-out;
    }

    tr:not(:first-child) {
      border-top: var(--border);
    }

    tr:hover {
      background-color: #ccc;
    }
  }

  th,
  td {
    padding: 8px;
  }

  td {
    min-height: 40px;
    display: grid;
    align-items: center;
  }
}

まとめ

subgrid を利用することで display: contents; と比較して、見た目のカスタマイズがシンプルなコードで実現できる場合が多いため、オススメです。

GitHubで編集を提案

株式会社ナンバーフォーPublication

「お客様のことを心から考えたソフトウェアを」四葉のクローバー・ナンバーフォーを見つけて頂いたお客様に幸せをお約束できるそういう会社でありたいと考え開発に取り組んでいます

display: contents;の問題点

subgrid を用いたtable layout

まとめ

Discussion

`display: contents;`の問題点

`subgrid` を用いたtable layout