I love software!

« 弊社製品の常備店にビッグ池袋店が加わりました | メイン | 本ブログの記事一覧を作成しました。 »

2009年04月06日

CSS3で得する話（3）CSS2.1の表のレイアウト

CSS2.1の表のレイアウトの方法は、(1) border-collapseプロパティで指定するborderの扱いと(2) table-layoutプロパティで指定する表の幅計算の方法で大幅に変わり、かなり複雑です。これを説明する例を作成してみました。次の図は同じXHTMLの表に4通りのレイアウト指定した結果です。

・オリジナルHTML
・AH Formatterで作成したPDF

表のスタイルを指定するCSS（一部）は次のようになっています。
○[Case 1] table-layout: fixed; border-collapse: collapse
.fixed-1 table {
table-layout: fixed;
margin: 5mm;
padding: 5mm;
border-top: solid 3mm gray;
border-left: solid 3mm gray;
border-bottom: solid 2mm gray;
border-right: solid 2mm gray;
border-collapse :collapse;
}
○[Case 2] table-layout: fixed; border-collapse: separate
.fixed-2 table {
table-layout: fixed;
margin: 5mm;
padding: 5mm;
border-top: solid 3mm gray;
border-left: solid 3mm gray;
border-bottom: solid 2mm gray;
border-right: solid 2mm gray;
border-collapse : separate;
border-spacing:2mm;
}
○[Case 3] table-layout: auto; border-collapse: collapse
.auto-1 table {
table-layout: auto;
margin: 5mm;
padding: 5mm;
border-top: solid 3mm gray;
border-left: solid 3mm gray;
border-bottom: solid 2mm gray;
border-right: solid 2mm gray;
border-collapse :collapse;
}
○[Case 4] table-layout: auto; border-collapse: separate
.auto-2 table {
table-layout: auto;
margin: 5mm;
padding: 5mm;
border-top: solid 3mm gray;
border-left: solid 3mm gray;
border-bottom: solid 2mm gray;
border-right: solid 2mm gray;
border-collapse : separate;
border-spacing:2mm;
}
(1) border-collapseの値がseparateかcollapseかによる主な相違点は、border-collapse: separateの時はセルの周囲のボーダーが独立になりセルとセルの間にborder-spacingで指定する空きができます。さらに、tableのpaddingが有効です。しかし、border-collapse: collapseの時は隣接するセルのボーダーが一つにまとめられます。さらにtableのpaddingもなくなります。

セルのボーダーをまとめるときの優先順位は次の通りです。
1) border-style: hiddenが最優先border-style: noneが最も優先度が低い
2) 幅の広い境界線が狭い境界線よりも優先される
3) 同じwidthをもつ境界線の中の優先度は、double > solid > dashed > dotted > ridge > outset > groove > inset
4) 色のみが異なる境界線の優先度は、cell > row > rowgroup > column > columngroup > tableとなりtableの境界が一番低い。
5) 同じ要素の種類が同じプロパティの線種をもつときは、横書きでは、左に行くほど、上に行くほど優先度が高い。

(2) table-layoutがfixedかautoかによる相違点は、fixedのときは列の幅はセルの内容に関わらず指定の幅になります。autoのときは指定された幅とセルの内容により自動的に幅を決定します。なお、fixedのときに列の幅の指定がないとき、表を包含するブロックの幅を使って表全体の幅の決定をするか、autoでセルの内容に合わせるかはどちらでも良いようです。AH Formatterは表を包含するブロックの幅一杯の幅にしています。しかし、ブラウザの実装は幅指定のない列の幅を小さくしているものが多いようです。

投稿者 koba : 2009年04月06日 08:00

トラックバック

このエントリーのトラックバックURL:
http://blog.antenna.co.jp/PDFTool/mt-tbng2.cgi/1261

コメント

コメントしてください