カテゴリー: table-layout

（例）【CSS】table-layoutの使用方法

See the Pen
table-layout by linlin (@linlin098765)
on CodePen.

<p>table-layout: auto;</p>
<table border="1" width="100%" style="table-layout: auto;">
<tr>
<th><font color="#FFFFFF">メニュー</font></th>
<th><font color="#FFFFFF">詳細</font></th>
<th><font color="#FFFFFF">備考</font></th>
</tr>
<tr>
<td bgcolor="red">ナポリタン</td>
<td bgcolor="#FFFFFF">ケチャップ味スパゲティ</td>
<td bgcolor="#FFFFFF">日本独自の料理</td>
</tr>
</table>

<p>table-layout: fixed;</p>
<table border="1" width="100%" style="table-layout: fixed;">
<tr>
<th><font color="#FFFFFF">メニュー</font></th>
<th><font color="#FFFFFF">詳細</font></th>
<th><font color="#FFFFFF">備考</font></th>
</tr>
<tr>
<td bgcolor="red">ナポリタン</td>
<td bgcolor="#FFFFFF">ケチャップ味スパゲティ</td>
<td bgcolor="#FFFFFF">日本独自の料理</td>
</tr>
</table>

th{
  background-color:gray;
}

【CSS】table-layout：テーブルの表示方法を指定する

　CSSのtable-layoutは、テーブル（表）の表示方法（列幅）を指定するプロパティです。行の高さは自動的に整えられます。

　table-layout:autoはテーブル（表）の列幅を自動的に整えるため読み込み速度が若干遅くなります。table-layout:fixedは列幅固定のため読み込み速度は速くなるメリットがあります。

　table-layout:fixedにて列幅を指定しない場合は、列幅を指定していない列は自動的に列幅を割り振られます。

• auto
  テーブル（表）の列幅を自動的に整える（初期値）
• fixed
  テーブル（表）の列幅を固定する