displayプロパティの値と各ブラウザの対応をまとめる

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

table関連

 displayプロパティでtable関連の値(table〜table-caption)を指定すると、

などでマークアップしたコンテンツでもテーブルとして表示することが可能だ。table関連の値について詳しくは、「Firefox 3が対応したdisplayプロパティの値(3) - inline-table」を参照してほしい。

Firefoxでの表示。SafariやOpera、Internet Expxlorer 8でも同じように表示される。 Firefoxでの表示。SafariやOpera、Internet Expxlorer 8でも同じように表示される。
.table{
display: table;
border: solid 3px #00aaff;
}

.caption{
display: table-caption;
text-align: center;
}

.tr{
display: table-row
}

.td{
display: table-cell;
border: solid 2px #aaff00;
padding: 10px;
}

.thead{
display: table-header-group;
background-color: #ffffaa;
}
ひらがなの表
ブラウザで表示を確認する
  • コメント(1件)
#1 F*   2008-05-24 10:10:12
CSS3 の inherit の件。すべての property が inherit と initail を受け付けるので、個々のプロパティで inherit を受け付けることを書くのをやめただけでは。http://www.w3.org/TR/2005/WD-css3-cascade-20051215/#inheritance
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]