テーブルをCSSでカスタマイズする際のテクニック集

テーブルをCSSでカスタマイズする際のテクニック集

2020年7月24日

テーブルの列を全て均等にする

tableにtable-layout: fixed;を指定する。

一部の列のみ固定幅にして、残りは均等幅を保つ性質がある。

※注意: 必ずtableにwithを指定すること。

ボーダーを1本線にする

tableにborder-collapse: collapse;を指定する。

注意:指定テーブルの全てにボーダーを付ける場合は、table、th、tdの3要素に指定すること。

テーブルのセル内の要素の配置を設定する

vertical-alignで指定できる。

テーブルの横スクロール設定

tableをdiv(水平スクロールを指定)で囲む。

例)

//HTML
<div class="tabletest-wrap">
<table class="tabletest">
  <tr><th>見出し</th><th>見出し</th><th>見出し</th></tr>
  <tr><td>短い文字短い文字短い文字</td><td>データ2</td><td>データ3</td></tr>
  <tr><td>データ1</td><td>短い文字短い文字短い文字</td><td>データ3</td></tr>
  <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
  <tr><td>データ1</td><td>データ2</td><td>短い文字短い文字短い文字</td></tr>
</table>
</div>
//CSS
.tabletest-wrap {
  overflow-x: auto;
}

ブックマーク

CSSでテーブルを作る上で実践的に覚えておきたいこと

https://haniwaman.com/table/#i-8