月別アーカイブ: 2009年4月

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は表を包含するブロックの幅一杯の幅にしています。しかし、ブラウザの実装は幅指定のない列の幅を小さくしているものが多いようです。




瞬簡PDF 書けまっせ 2024
PDFに文字が書ける! 入力欄を自動認識


瞬簡PDF 編集 2024
かんたん操作でPDFを自由自在に編集

弊社製品の常備店にビッグ池袋店が加わりました

4月より、アンテナハウスの製品を常備していただいているお店に、 (株)ビックカメラ ビックパソコン館 池袋本店 PCソフトコーナー様が新しく加わりました。
よろしくお願いします。
弊社製品の常備店はこちらでご紹介しています。
■製品常備店




瞬簡PDF 書けまっせ 2024
PDFに文字が書ける! 入力欄を自動認識


瞬簡PDF 変換 2024
PDFをOffice文書へ高精度変換
Pages: Prev 1 2