IE8が対応したCSS 2.1の機能:テーブル、セレクタ、アウトライン関連の機能

エ・ビスコム・テック・ラボ
2009-05-07 12:40:02
  • このエントリーをはてなブックマークに追加

 前回の「IE8が対応したCSS 2.1の機能:印刷とコンテンツの追加に関する機能に続けて、IE8が新規に対応したCSS 2.1のプロパティや値についてまとめていく。

 今回はテーブル、セレクタ、アウトラインに関連する機能を確認していきたい。

 なお、新しく対応した機能を利用するにはIE8のStandardsモード(標準準拠モード)で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。

テーブル関連の機能

 IE8は、これまでテーブル関連で未対応だった次の3つのプロパティをサポートした。

  • border-spacing
  • caption-side
  • empty-cells

border-spacingプロパティ

 border-spacingはセルの間隔を指定するプロパティだ。古いIEでは

のcellspacing属性を利用するしかなかったが、IE8でようやくCSSで間隔を調節できるようになった。

 たとえば、次のサンプルはborder-spacingプロパティでセルの間隔を20ピクセルに指定したものだ。各セルは黄緑色の罫線で囲んで表示しており、セルの間に大きな余白が挿入されていることがわかる。

border-spacingプロパティでセルの間隔を20ピクセルに指定 border-spacingプロパティでセルの間隔を20ピクセルに指定
table{
border-spacing: 20px;
border: solid 3px #00aaff;
}

td{
border: solid 2px #ccff00;
padding: 5px;
}
キャプション
ブラウザで表示を確認する

caption-side

 caption-sideはキャプションの表示位置を指定するプロパティだ。「top」と「bottom」の2種類の値を指定することができ、次のサンプルのように「caption-side:bottom」と指定するとテーブルの下にキャプションを表示することが可能だ。なお、標準ではキャプションはテーブルの上に表示される。

caption-sideでキャプションの表示位置を指定 caption-sideでキャプションの表示位置を指定
caption{
caption-side: bottom;
}
ブラウザで表示を確認する

empty-cells

 empty-cellsはコンテンツが記述されていない空セルの表示の有無を指定するプロパティだ。指定できる値は「show」と「hide」の2種類で、標準値は「show」となる。次のサンプルのように「empty-cells:hide」と指定すると空セルが表示されなくなる。

このサンプルでは「empty-cells:hide」と指定し、空セルを表示していない このサンプルでは「empty-cells:hide」と指定し、空セルを表示していない
td{
empty-cells: hide;
}
ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]