Firefox 3が対応したdisplayプロパティの値(3) - inline-table

エ・ビスコム・テック・ラボ
2008-05-16 13:11:01
  • このエントリーをはてなブックマークに追加

tableボックスとinline-tableボックス

 テーブルを構成するtableボックスはblockボックスの1種であるため、前後にテキストを記述しても標準では横に並んで表示されることはない。

Firefox 3の表示。テーブルの前後にテキストを記述したもの。 Firefox 3の表示。テーブルの前後にテキストを記述したもの。
table{
border: solid 3px #00aaff;
}

td{
border: solid 2px #ccff00;
padding: 5px;
}
こんにちは

こんばんは
ブラウザで表示を確認する

 しかし、

のボックスをinline-tableボックスに変更すれば、inlineボックスと同じ扱いになり、前後のテキストと並べて表示することが可能だ。

Firefox 3の表示。テーブルをinline-tableボックスで表示したもの。 Firefox 3の表示。テーブルをinline-tableボックスで表示したもの。
table{
display: inline-table;
border: solid 3px #00aaff;
}

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

 SafariやOpera、Internet Explorer 8(ベータ版)でinline-tableボックスを表示すると、以下のような表示になる。前後のテキストの表示位置が、Firefox 3やOperaではテーブルの1行目に揃えて表示されるのに対して、SafariやInternet Explorer 8ではテーブルの下に揃えて表示されることがわかる。

  • 下で揃える:Safari, IE
  • 1行目で揃える:Opera, Firefox
Safariの表示 Safariの表示
Operaの表示 Operaの表示
Internet Explorer 8の表示 Internet Explorer 8の表示

テーブルとテキストを揃える位置

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]