table-layoutについてお勉強
まずtable-layoutってなに?
表組みのレイアウトする指定方法。
列の幅を、固定か自動か決められる。
表の高さは自動計算。
固定レイアウトにした場合、表示が早くなるという利点がある。
指定方法は?
① auto(初期値)
テーブルの幅は、セルの内容に合わせて自動。
② fixed
テーブルの幅は、指定して固定する。
指定がない列は、均等に分割される。
適用される要素は?
テーブル要素。
とりあえず、書いてみる
<table class="table1">
<tr>
<th>商品名</th>
<th>在庫数</th>
<th>価格</th>
</tr>
<tr>
<td>ミネラルウォーター</td>
<td>150本</td>
<td>100円(税抜)</td>
</tr>
<tr>
<td>いろはす 温州みかん味</td>
<td>150本</td>
<td>100円(税抜)</td>
</tr>
</table>
.table1 {
width: 500px;
table-layout: auto; /* テーブルレイアウト */
}
.table1,td,th{
border: 1px solid;
}
table-layout: auto; → table-layout: fixed;
列幅を数値で指定したい時。
HTML <th>にクラス名を付与
<th class="product_name">商品名</th>
<th class="product_num">在庫数</th>
<th class="product_price">価格</th>
CSS追加
.table2 .product_name {
width: 70%;
}
<table class="table1">
<tr>
<th class="product_name">商品名</th>
<th class="product_num">在庫数</th>
<th class="product_price">価格</th>
</tr>
</table>