display:table-cellについて

下記のhtmlを、

<h4>あああ</h4><p>あああ</p>
<h4>いいい</h4><p>いいい</p>
<h4>ううう</h4><p>ううう</p>

下記のようなテーブルのときと同じ見た目にしたいです。

<table>
<tr>
<th>あああ</th><th>いいい</th><th>ううう</th>
</tr>
<tr>
<td>あああ</td><td>いいい</td><td>ううう</td>
</tr>
</table>

つまり、h4同士、p同士の高さが、
それぞれ一番高いセルに追従するということです。

※文法を遵守したまま見た目だけテーブル組みが狙いですので、
テキストの順番を入れ替えるのはＮＧです。

display:table-cellがIE8から実装されますので、
tableの代用品として使えると思ったのですが、
もし、このケースがdisplay:table-cellではできないとなると、
とんだ紛い物となってしまいます。

現在、自分でも調べているところですが、
ご存知の方がいらっしゃいましたら、
ご教授よろしくお願いいたします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2008/12/25 01:25

さすがに分かりにくいので、すこし書き直します。

<div id="table">
<h4 id="a">見出しA</h4>
<p>Ａの内容</p>
<h4 id="b">見出しＢ</h4>
<p>Ｂの内容</p>
<h4 id="c">見出しＣ</h4>
<p>Ｃの内容</p>
</div>
ですね。これをtable-cellという、実装ほとんどされていないものを利用して配置するのは感心しません。
まあ、XMLとXSLTなら簡単ですが、それでも汎用性にはかけます。

スタイルーとだと・・・・思いついたものを適当に書いたので、他に、もっと良い方法があるはず・・・。これは、制約が多くてあまり進められない方法です。出来るという意味だけで見てください。
div#table{
position:relative;
margin-left:20%;
margin-right: 20%;
height: 5em;

}
div#table h4{
margin:0px;
padding: 0.4em 0.1em;
font-size: 1em;
font-weight: normal;
border:solid 1px gray;
display: inline-table;
position: absolute;
top: 0px;
width: 32%;
text-align: center;
}
div#table h4#b{
left: 33%;
}
div#table h4#c{
left: 66%;
}
div#table p{
border:solid 1px gray;
padding: 0.4em 0.1em;
position: absolute;
top: 2em;
width: 32%;
height: 2em;
}
div#table h4#b+p{
left: 33%;
}
div#table h4#c+p{
left: 66%;
}

div#table h4#a{

この回答へのお礼

ご回答ありがとうございます。

説明不足ですみません。
h4、pのテキストの長さはランダムで1行だったり2行だったりします。
どこかが2行になってもテーブル組みの縦に連動して伸びる性質でそろえたいです。
ちなみに現状は、それぞれをfloatで並べて、
一番高い枠の高さの取得してheightを各タグに書き込むようなJavaScriptを利用して対処しています。

また、display:tableはtableタグを表以外に使わないように、
見た目だけテーブルレイアウトができるように実装された
W3C勧告に準じているスタイルですので、
ターゲット層の閲覧者に見やすいレイアウトとして利用するかぎりは、
どのタグに適用しても問題ないスタイルだと認識しています。
このスタイルが使われていないのは
ＩＥ６と７に実装されてないからという
しょっぱい理由だけだと思っています。。

お礼日時：2008/12/25 20:16

No.4 回答者： noname#83877 回答日時： 2008/12/25 13:33

すみません、横ですね。

下のは勘違いみたいです。

No.3 回答者： noname#83877 回答日時： 2008/12/25 13:31

結構適当ですが似たようなのができました。

<style type="text/css">
*{margin:0; padding:0;}
h4 {float:left; clear:left;}
p {float:left;}
</style>


<h4>あああ</h4><p>あああ</p>
<h4>いいい</h4><p>いいい</p>
<h4>ううう</h4><p>ううう</p>


firefoxでしか確認していませんが、一応できるみたいですね。

No.2 回答者： noname#83877 回答日時： 2008/12/25 10:06

さすがに実用的ではないのでまだ試していないのですが、h4に対してtable-cellではなく、table-header-groupの指定をすると良いのではないでしょうか。

ただ、IE8は多分対応していません。あまり過度な期待はしない方が良いでしょう。

この回答へのお礼

ご回答ありがとうございます。
こちらでもいろいろ試してみましたが、
単純な縦割りのカラムレイアウトにしか活用できなさそうですね。
ただfloatも印刷対応など不具合の原因になりやすいこともあり、
それだけでもかなり使えそうだとは思っています。
Windows7が軽いとの噂があったので、
IE8の普及も意外と早くくるのではないかと思い、
先取りしておこうと思ったのですが、
少し様子を見たほうがよさそうですね。
お二方ともありがとうございました。

お礼日時：2008/12/25 20:22