説明
表(テーブル)は長いデータが入るセルの横幅を長く確保しますが、table-layoutを使うと同じ幅にする事が出来ます。

table-layoutプロパティを使うと表(テーブル)の表示方法を指定出来ます。
表(テーブル)は長いデータが入るセルの横幅を長く確保しますが、table-layoutを使うと同じ幅にする事が出来ます。
table-layoutプロパティの構文は以下の通りです。
table-layout: 表示方法;
表示方法はautoがデフォルトで長いデータが入るセルがある列は横幅が長くなります。
fixedにすると各列の幅を均等に出来ます。
table-layoutの利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
table {
table-layout: fixed;
width: 100%;
}
<table border=1>
<tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>このデータは他よりとても長いデータです。倍以上あります。</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
上記を表示すると以下になります。
題1 | 題2 |
---|---|
このデータは他よりとても長いデータです。倍以上あります。 | データ2 |
データ3 | データ4 |
各列は同じ幅で表示されています。
同じ表でデフォルトのautoの場合は以下のように表示されます。
題1 | 題2 |
---|---|
このデータは他よりとても長いデータです。倍以上あります。 | データ2 |
データ3 | データ4 |
長いデータのセルがある列が横幅が長く確保されています。
table-layoutはwidthで100%を指定しているか、幅が親ボックスより大きくなる場合に有効です。
以下は1つ目の表がfixed、2つ目の表がautoですが、確保される幅が変わりません
題1 | 題2 |
---|---|
データ1は短くなりました。 | データ2 |
データ3 | データ4 |
題1 | 題2 |
---|---|
データ1は短くなりました。 | データ2 |
データ3 | データ4 |
表は自動で必要な幅を確保し、親ボックス等の幅を越える場合に文字がセル内で折り返されます。
このため、幅一杯になるまでは、必要な幅しか確保しないため、autoもfixedも同じになります。
尚、IE7等の古いブラウザではfixedを指定すると、必要な幅が親ボックスの幅より小さい場合でも同じ幅になります。
・ホームページ作成「表の挿入」
表の表示方法だけでなく、罫線の表示、罫線を1重線にする方法、罫線の太さと色を変える方法、幅の指定、センタリング、の背景と文字の色を変える方法、セルの結合等について説明しています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ