CSS の table-layout
プロパティは、 <table>
のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */
table-layout: auto;
table-layout: fixed;
/* グローバル値 */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
値
auto
- 既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。
fixed
- 表と列の幅は
table
要素とcol
要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列幅の設定に影響しません。 - "fixed" レイアウト方法に於いては、一度テーブルの一行目のみをダウンロードして解析した後、テーブル全体をレンダリングします。これは自動テーブルレイアウトアルゴリズムよりレンダリング速度を速くする事が出来ますが、後続するセルのコンテンツが用意された列幅に収まらないかもしれません。セルは
overflow
プロパティを使用して、表の幅が分かっている場合、はみ出すコンテンツを切り取るかどうかを定めます。そうでなければ、セルははみ出しません。
形式文法
auto | fixed
例
この例は表の固定レイアウトを使用し、 width
プロパティとの組み合わせで、表の幅を制限しています。 text-overflow
プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。
表のレイアウトが auto
である場合、表は指定された width
よりも内容に合わせて広がります。
HTML
<table>
<tr><td>Ed</td><td>Wood</td></tr>
<tr><td>Albert</td><td>Schweitzer</td></tr>
<tr><td>Jane</td><td>Fonda</td></tr>
<tr><td>William</td><td>Shakespeare</td></tr>
</table>
CSS
table {
table-layout: fixed;
width: 120px;
border: 1px solid red;
}
td {
border: 1px solid blue;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Result
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Level 2 (Revision 1) table-layout の定義 |
勧告 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | table および inline-table 要素 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser