table-layoutプロパティの説明
CSSのtable-layoutプロパティは、テーブル（表）のレイアウトに使用されるアルゴリズムを指定します。ほとんどの場合は、ブラウザの既定値に従って自動的なレイアウトに任せるため、あまり使う機会がないかもしれませんが、行や列の多い巨大なテーブルやセルの中のデータが大きい場合に活用できる場面があります。
例えば、セルの中に入るデータが長い文字列の場合に、セルの寸法を制限して省略した内容を表示させたい場合などに有効です。
table-layoutに指定できる値
auto- ブラウザの自動的なレンダリングに任せます。これが既定値です。
table-layoutの使い方とサンプルコード
table-layoutプロパティの構文は以下の通りです。
/* キーワード値 */
table-layout: auto;
table-layout: fixed;
/* グローバル値 */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
table-layoutの実例
それでは実際にtable-layoutプロパティの書き方を見ていきましょう。以下の例は、幅を固定した表に内容の溢れるセルが配置された時の比較です。table-layoutの値を変更すると、表の寸法に違いが現れます。さらに、表の幅が固定された時にセルからはみ出すコンテンツをoverflowとtext-overflowによって制御しています。
<section class="samp_box">
<div>
<table id="table_1">
<caption>table-layout: auto;</caption>
<tr>
<th>TH A</th>
<th>TH B</th>
<th>TH C</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2:ABCD</td>
<td>B2:ABCDEFG</td>
<td>C2:ABCDEFGHIJK</td>
</tr>
<tr>
<td>A3:123</td>
<td>B3:123456</td>
<td>C3:1234567890</td>
</tr>
</table>
</div>
<div>
<table id="table_2">
<caption>table-layout: fixed;</caption>
<tr>
<th>TH A</th>
<th>TH B</th>
<th>TH C</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2:ABCD</td>
<td>B2:ABCDEFG</td>
<td>C2:ABCDEFGHIJK</td>
</tr>
<tr>
<td>A3:123</td>
<td>B3:123456</td>
<td>C3:1234567890</td>
</tr>
</table>
</div>
<div>
<table id="table_3">
<caption>table-layout: fixed;</caption>
<tr>
<th>TH A</th>
<th>TH B</th>
<th>TH C</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2:ABCD</td>
<td>B2:ABCDEFG</td>
<td>C2:ABCDEFGHIJK</td>
</tr>
<tr>
<td>A3:123</td>
<td>B3:123456</td>
<td>C3:1234567890</td>
</tr>
</table>
</div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > div {
margin-top: 1rem;
padding: 1rem;
background: #fff;
}
.samp_box table {
width: 300px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-spacing: 0px;
white-space: nowrap;
}
.samp_box table th {
background-color: #ccc;
}
.samp_box table td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#table_1 {
table-layout: auto;
}
#table_2 {
table-layout: fixed;
}
#table_3 {
table-layout: fixed;
}
#table_3 td {
overflow: hidden;
text-overflow: ellipsis;
}