CSS
テーブル

構文

• テーブルレイアウト： 自動 |一定;
• 国境崩壊： 分離 |崩壊;
• border-spacing：<長さ> | <length> <length>;
• 空セル： 表示 |隠す;
• キャプション側： top |底;

備考

テーブルレイアウト

table-layoutプロパティは、テーブルのレイアウトに使用されるアルゴリズムを変更します。

以下の例では、2つのテーブルの両方をwidth: 150px ：

左側のtable-layout: autoはtable-layout: autoを持ち、右側のtable-layout: fixedはtable-layout: fixedです。前者は指定された幅（150pxの代わりに210px）よりも広いですが、コンテンツは収まります。後者は、内容がオーバーフローするかどうかにかかわらず、定義された幅150pxをとります。

国境崩壊

border-collapseプロパティは、テーブルの境界を分割またはマージする必要があるかどうかを決定します。

border-collapseプロパティの値が異なる2つのテーブルの例を以下に示します。

左の表は、持っているborder-collapse: separate右の1が持っていながら、 border-collapse: collapse 。

ボーダー間隔

border-spacingプロパティは、セル間の間隔を決定します。 border-collapseがseparateされていない限り、これは効果がありません。

border-spacingプロパティと異なる値を持つ2つのテーブルの例を以下に示します。

左側の表にはborder-spacing: 2px （デフォルト）があり、右側にborder-spacing: 8pxます。

空セル

empty-cellsプロパティは、内容のないセルを表示するかどうかを決定します。 border-collapseがseparateされていない限り、これは効果がありません。

異なる値を持つ2つのテーブルがempty-cellsプロパティに設定されている例を以下に示します。

左の表は、持っているempty-cells: show右の1が持っていながら、 empty-cells: hide 。前者は空のセルを表示し、後者は空のセルを表示します。

詳しくは：

• https://www.w3.org/TR/CSS21/tables.html#empty-cells
• https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
• http://codepen.io/SitePoint/pen/yfhtq
• https://css-tricks.com/almanac/properties/e/empty-cells/

字幕側

caption-sideプロパティは、テーブル内の<caption>要素の垂直方向の位置を決定します。このような要素が存在しない場合、これは効果がありません。

異なる値を持つ2つのテーブルがcaption-sideプロパティに設定されている例を以下に示します。

左側の表にはcaption-side: topあり、右側の表にはcaption-side: bottomます。