CSSテーブルレイアウトプロパティ
例
さまざまなテーブルレイアウトアルゴリズムを設定します。
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
定義と使用法
このtable-layout
プロパティは、テーブルのセル、行、および列のレイアウトに使用されるアルゴリズムを定義します。
ヒント:テーブルレイアウトの主な利点:修正済み。テーブルのレンダリングがはるかに高速になるということです。大きなテーブルでは、ブラウザがテーブル全体をレンダリングするまで、ユーザーにはテーブルのどの部分も表示されません。したがって、table-layout:fixedを使用すると、ブラウザがテーブルの残りの部分を読み込んでレンダリングしている間、ユーザーにはテーブルの上部が表示されます。これにより、ページの読み込みが非常に速くなるという印象を与えます。
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS2 |
JavaScript構文: | object .style.tableLayout = "fixed" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
CSS構文
table-layout: auto|fixed|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
auto | Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout | |
fixed | Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSSテーブル
HTML DOMリファレンス:tableLayoutプロパティ