htmlやcssを学習していると、テーブルレイアウトといった概念を目にすることも多いですよね。
そんなテーブルレイアウトに使用することができる、「table-layout」プロパティというものが存在することをご存知でしたか？
「table-layoutで何ができるのか知らない」
「table-layoutって聞いたことはあるけど使い方を知らない」
今回は、このような方に向けて
について説明します。
【索引】CSSプロパティ辞典
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の使い方をサンプルコードを用いて見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* -- 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> |
|
|
/* -- css -- */ .table_layout{ table-layout: auto; width: 500px; } .name{ width: 200px; } th,td{ border: 1px solid #ff838b; } |
全体の幅を500px、最初の列の幅を200pxと設定した場合、後続の列は中身のコンテンツに合わせて自動的に列の幅が決定されています。
次にtable-layoutプロパティの値が「fixed」の場合を見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* -- 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> |
|
|
/* -- 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;」を反映させるためには、テーブル全体の幅を指定する必要があります。
まずはテーブル全体の幅を指定していない場合から見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* -- 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> |
|
|
/* -- 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」で指定していましたが、「%」で指定することも可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* -- 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> |
|
|
/* -- 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
