インライン要素として含めることができるテーブルブロック
Last update: 2008-09-09
Firefox 3 が正式に対応した display プロパティのもう一つが display: inline-table だ。
これはブロック要素の性質を持ちながら、前後には改行を伴わない。要するに inline-block と同じ性質を持ったプロパティということになる。table セレクタとの違いは上記の部分だけで、その他の仕様は table と同じだと思って良い。
その活用方法だけど、やっぱり良いアイデアを思いつかない。というのも、HTML には table セレクタが存在するわけだし、インライン要素の中にテーブルが出現する状況を思いつかないのだ。←想像力が乏しいだけかも(^^;
ものすごく品粗な想像力で考えたのは、パラグラフ (p 要素) 内にインライン・テーブルが出現するこれ。
量産車両のクラッチハブは図のような構成となっている。
クラッチハブはハウジングボディーとスパーギアで構成される。スパーギアはショックダンパを介してハウジングボディーに固定される。この時、スパーギアはショックダンパ上でフローティング状態となり、クランクシャフトから伝わる急激なトルクの立ち上がりを緩やかに逃がしている。
クラッチハブの構造図
HTML と CSS は…かなりややこしい。下のコードは長くなるので色やボーダーなどの記述を省いている。全容を知りたい場合は こちら ご覧ください。
<p>量産車両のクラッチハブは図のような構成となっている。
<span id="exp-tb1">
<span class="tb-tr">
<img src="csst_img/note_css01h_01.jpg" width="240" height="160" alt=" " class="in-cell1" />
<span class="in-cell2">クラッチハブはハウジングボディーとスパーギアで 〜中省略〜 急激なトルクの立ち上がりを緩やかに逃がしている。</span>
</span>
<span class="in-caption">クラッチハブの構造図</span>
</span>
</p>#exp-tb1 {/* テーブルの宣言 */
display: inline-table;
}
.tb-tr {/* ２つのセルを一行に */
display: table-row;
}
.in-cell1,
.in-cell2 {
display: table-cell;
}
.in-cell1 {/* photo */
vertical-align: top;
}
.in-caption {
display: table-cell;
text-align: center;;
font-weight: bold;
}思ったようなレンダリング結果になっていないのだが、Firefox 3.1a2 と Safari 3.1.2 は全く同じ結果なので、CSS の書き方に問題があるのかもしれない。それにしても期待したのはこんな結果なのだが。
やったことを簡単に説明すると、パラグラフ (p) 内に span 要素でテーブルブロックを作り、その中に子 span で行ブロック (table-row) を入れ、さらにその中に３つのセルブロックを内包している。イメージはインライン要素なので display: table-cell を指定できるというわけだ。
にしてもややこしい。
float と clear を使わず、table セレクタよりも自由度があるので、もしかしたら段組レイアウトのバグを少なくできるのかもしれない。が、やはりレイアウトデザインに利用するというのは今一つ引っかかるのだが。
