テーブル

テーブルの表示サイズの設定

テーブル内の要素がwidth、heighにより設定されたサイズよりも大きい場合、table-layout:fixedを指定しないとサイズの指定が無視されます。

table-layout

table-layoutでは、テーブルのレイアウトの方法を指定できます。指定可能な値は次の2つです。

  • auto … 自動レイアウト (既定)
  • fixed … 固定レイアウト

この属性の用途は、巨大なtable要素の表示の高速化です。fixedではセルの表示サイズを無視して描画するため、1行目から順に描画されます。ただしこの場合、セルから内容がはみ出ることがあります。

  width:100px width:300px
table-layout:auto
123456789 123
123 12345
123456789 123
123 12345
table-layout:fixed
123456789 123
123 12345
123456789 123
123 12345

またfixedではセル幅はその内容に無関係に決定されるため、セル幅を均等に割り当てる用途にも使えます。

table-layout  
auto
123 1 123456789
fixed
123 1 123456789

border-collapse

セルの枠線の表示方法を設定します。

separate
   
   
collapse
   
   

border-spacing

セルのボーダーの間隔を設定します。

1px
   
   
20px 5px