【CSS】table-layoutを使って、セルの幅を調整しよう！

htmlやcssを学習していると、テーブルレイアウトといった概念を目にすることも多いですよね。

そんなテーブルレイアウトに使用することができる、「table-layout」プロパティというものが存在することをご存知でしたか？

「table-layoutで何ができるのか知らない」

「table-layoutって聞いたことはあるけど使い方を知らない」

今回は、このような方に向けて

・table-layout基本的な使い方

について説明します。

【索引】CSSプロパティ辞典

1 table-layoutとは
2 table-layoutの基本的な使い方
- 2.1 table-layoutの使い方
- 2.2 table-layout: fixed;が効かないときの対処法
3 table-layoutの応用的な使い方
4 まとめ

table-layoutとは

table-layoutの読み方

table-layoutプロパティは「テーブルレイアウト」と読みます。

その名の通り、テーブルレイアウトに関するプロパティだろうと想像できますね。

table-layoutの説明

table-layoutプロパティを使うことで、tableのセルや行、または列のレイアウトを調整することができます。

セルの幅を自動的に均等にすることもできる便利なプロパティですので、ぜひ覚えていってくださいね。

table-layoutで利用できる値

table-layoutでは以下の値を使うことができます。

値	説明
auto	幅と中身は要素のに合うよう自動的に調整されます。（初期値）
fixed	widthによって指定された値が列の幅となる。指定のない場合は均等に調整される。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
nternet Explorer	完全対応
Opera	完全対応
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	完全対応
iOS版Safari	完全対応
Samsung Internet	完全対応

table-layoutの基本的な使い方

table-layoutの使い方

それでは実際にtable-layoutの使い方をサンプルコードを用いて見てみましょう。

/* -- html -- */

<table class="table_layout">
  <tr>
    <th class="name">商品名</th>
    <th class="price">価格</th>
    <th class="num">在庫数</th>
  </tr>
  <tr>
    <td>トップス</td>
    <td>1,000円（税抜）</td>
    <td>500</td>
  </tr>
  <tr>
    <td>アウター</td>
    <td>15,000円（税抜）</td>
    <td>300</td>
  </tr>
  <tr>
    <td>バッグ</td>
    <td>5,000円（税抜）</td>
    <td>800</td>
  </tr>
</table>

/* -- html -- */

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

/* -- css -- */

.table_layout{
  table-layout: auto;
  width: 500px;
}

.name{
  width: 200px;
}

th,td{
  border: 1px solid #ff838b;
}

/* -- css -- */

.table_layout{

table-layout: auto;

width: 500px;

}

.name{

width: 200px;

}

th,td{

border: 1px solid #ff838b;

}

全体の幅を500px、最初の列の幅を200pxと設定した場合、後続の列は中身のコンテンツに合わせて自動的に列の幅が決定されています。

次にtable-layoutプロパティの値が「fixed」の場合を見てみましょう。

/* -- html -- */

<table class="table_layout">
  <tr>
    <th class="name">商品名</th>
    <th class="price">価格</th>
    <th class="num">在庫数</th>
  </tr>
  <tr>
    <td>トップス</td>
    <td>1,000円（税抜）</td>
    <td>500</td>
  </tr>
  <tr>
    <td>アウター</td>
    <td>15,000円（税抜）</td>
    <td>300</td>
  </tr>
  <tr>
    <td>バッグ</td>
    <td>5,000円（税抜）</td>
    <td>800</td>
  </tr>
</table>

/* -- html -- */

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

/* -- css -- */

.table_layout{
  table-layout: fixed;
  width: 500px;
}

.name{
  width: 200px;
}

th,td{
  border: 1px solid #ff838b;
}

/* -- css -- */

.table_layout{

table-layout: fixed;

width: 500px;

}

.name{

width: 200px;

}

th,td{

border: 1px solid #ff838b;

}

値が初期値である「auto」のときとは違い、2列目・3列目の幅が均等になるよう調節されていることがわかるかと思います。

このように「テーブル全体の幅」と「1列目の幅」を指定することで、後続の列の幅が均等になるというのは便利かもしれませんね。

tableタグとは？基本的な使い方からデザインの変え方まで徹底解説

table-layout: fixed;が効かないときの対処法

2列目以降のセルの幅を均等にしたいと思い、「table-layout: fixed;」を指定したが反映されず均等にならないといった場合があるかもしれません。

「table-layout: fixed;」を反映させるためには、テーブル全体の幅を指定する必要があります。

まずはテーブル全体の幅を指定していない場合から見てみましょう。

/* -- html -- */

<table class="table_layout">
  <tr>
    <th class="name">商品名</th>
    <th class="price">価格</th>
    <th class="num">在庫数</th>
  </tr>
  <tr>
    <td>トップス</td>
    <td>1,000円（税抜）</td>
    <td>500</td>
  </tr>
  <tr>
    <td>アウター</td>
    <td>15,000円（税抜）</td>
    <td>300</td>
  </tr>
  <tr>
    <td>バッグ</td>
    <td>5,000円（税抜）</td>
    <td>800</td>
  </tr>
</table>

/* -- html -- */

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

/* -- css -- */

.table_layout{
  table-layout: fixed;
/*   width: 500px; */
}

.name{
  width: 200px;
}

th,td{
  border: 1px solid #ff838b;
}

/* -- css -- */

.table_layout{

table-layout: fixed;

/* width: 500px; */

}

.name{

width: 200px;

}

th,td{

border: 1px solid #ff838b;

}

テーブル全体の幅を指定している「width: 500px;」をコメントアウトしてみると、「table-layout: fixed;」の効果が反映されていないことがわかりますね。

このようになっていまうことを防ぐために、テーブル全体の幅を指定しておくことを覚えておきましょう。

table-layoutの応用的な使い方

これまで1列目のセルの幅を指定するために単位を「px」で指定していましたが、「%」で指定することも可能です。

/* -- html -- */

<table class="table_layout">
  <tr>
    <th class="name">商品名</th>
    <th class="price">価格</th>
    <th class="num">在庫数</th>
  </tr>
  <tr>
    <td>トップス</td>
    <td>1,000円（税抜）</td>
    <td>500</td>
  </tr>
  <tr>
    <td>アウター</td>
    <td>15,000円（税抜）</td>
    <td>300</td>
  </tr>
  <tr>
    <td>バッグ</td>
    <td>5,000円（税抜）</td>
    <td>800</td>
  </tr>
</table>

/* -- html -- */

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

/* -- css -- */

.table_layout{
  table-layout: fixed;
  width: 500px;
}

.name{
  width: 40%;
}

th,td{
  border: 1px solid #ff838b;
}

/* -- css -- */

.table_layout{

table-layout: fixed;

width: 500px;

}

.name{

width: 40%;

}

th,td{

border: 1px solid #ff838b;

}

1列目の幅を「40%」と指定しましたので、2列目と3列目を残りの「60%」で均等になるように反映されます。

「%」で指定することは、レスポンシブさせる際などに非常に便利になりますので、ぜひ覚えておきましょう。

初心者がウェブカツ‼を受講しエンジニアになった成功体験

まとめ

いかがでしたか？

今回は「table-layoutの使い方」について解説してきました。

ぜひ参考にしていただいて、ご自身のホームページやブログにも取り入れてみてくださいね。

最後まで読んでいただいてありがとうございました。

参考文献：MDN web docs｜table-layout

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。