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

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

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

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

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

ボーダーを１本線にする

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

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

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

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