tableの横幅自動調整をCSSでできませんか？

質問

tableタグで2列*4行の表を作り、各行の1列目に様々な長さのテキストが書き込まれるとします。

＋------------------+
｜列1　　　　 ｜列2　　　｜
＋------------------+
｜あ　　　　　 ｜テキスト｜
＋------------------+
｜あい　　　　｜テキスト｜
＋------------------+
｜あいうえお｜テキスト｜
＋------------------+
｜あああ　 　｜テキスト｜
＋------------------+

すると上記のように、1列目の列幅は最長のテキストを格納した列の幅（例の場合、"あいうえお"の列幅）を利用することになり、当然、他の列の横幅もそれに従って同じ列幅となります。これをtableを使うことなくCSSで再現したいのですが、どのようにすれば実現可能でしょうか？ul+li、dl+dt+ddの2通りの方法で試していますが、なかなかうまくいきません。どうか皆様の知恵をお貸しください。

条件として、列に格納されるテキスト（の長さ）は可変となることを想定していますので、絶対値は利用しない方法でお願いいたします。あとJavascriptも使わない方法でお願いします。

回答No.4

abril

No.2です。
（CSS中のolはulのタイプミスだと思いますが）No.3様の方法だったらIEを度外視すればイケますね（Firefox2/3、Safari3、Google Chrome等検証済）。
私も先の回答前に"display: table-cell;"とIEでのそれの代替方法っぽい"display: inline;"とzoomの組み合わせで何とかできないか、とも一瞬考えましたがIEでは結局列が合わせられないし…で即断念しました。No.3様の着目した通りこの方法の肝は"display: table-row;"が効いてこそ（「表の行要素（tr要素）にする」という表示性質が持てる）なので…IEは本当に色々足を引っ張ってくれますね。

ただ残る問題はやはり、「あああ」と「いいい」の各データが、”liの子要素として適切なマークアップ”ができるものか否か、という本質的なところだと思います。No.3様もお断りしてらっしゃる様に、それの判断は実際のソースを把握してらっしゃる質問者様以外にはできかねる事なので。

もし上記条件をクリアできており、且つIEでの見た目がそれ以外と大きく異なっても構わない（というか、上記条件をクリアできているという事はつまり論理構造上も適切であるという事になりますので、スタイルを度外視しても意味が通る筈であり問題ない状態の筈ですが…）、というのであればNo.3様の方法でOKだと思います。

回答No.3

kuzumiHK

IE6やIE7がすたれてこないと難しいですが、
IE8から実装されてる？と思われる
display: table-cellというのがあります。
※即興で書いたのでブラウザ確認してません。
もし崩れてたらすみません。。

<ul>
<li><h3>あああ</h3><p>いいい</p></li>
<li><h3>あああ</h3><p>いいい</p></li>
<li><h3>あああ</h3><p>いいい</p></li>
</ul>

<style type="text/css">
*{
margin:0;
padding:0;
}

ul{
list-style:none;
}

ul li{
display:table-row;
}

ol li h3,
ol li p{
display:table-cell;
border:1px solid #f00;
}
</style>

※内容が今回のソースと文法的に正しいかどうかは考慮してません。
選んだタグはテキトーですので、
見た目だけのサンプルとしてご参考ください。

これが主流になればスタイルでできることもかなり広がりそうですが、
現状でtableに近いことをスタイルだけで再現するのは難しそうです。

参考URL：

http://msugai.fc2web.com/web/CSS/table.html

回答No.2

abril

結論を先に申し上げておくと：

> 条件として、列に格納されるテキスト（の長さ）は可変となることを想定していますので、絶対値は利用しない方法でお願いいたします。あとJavascriptも使わない方法でお願いします。

これでは八方塞がりなので、ulやdlでの実現は無理だと思いますが…例えばdlであれば、列1をdt、列2をddとしてマークアップする事自体は可能ですが、tableと違って、dtどうしには”同じ列”という概念がありませんから、可変の最長のdtに合わせて他のdtが揃う、という性質がありません（ddについても同じ）。
それからこの内容だと、dlはともかくulでマークアップするのは有り得ない（列1も列2も同格のliになってしまう）と思うのですが…列1が目印的な画像（「製品情報」「お知らせ」「プレスリリース」等々）だというならそれをimgもしくはCSSの背景画像として設置する、というのであればわかりますが。
列1が「項目名」の様なものであり列2が「それに対応するデータ」であるなら、現在のtable（表）でのマークアップが一番相応しいですし、列1が「定義する語句」であり列2が「その定義（説明）部分」であるなら、dlでのマークアップが相応しいでしょう。
もし、前者の様な（tableでのマークアップに相応しい）内容であるなら、tableを使えない理由は何でしょうか？

差し支えなければ：

> ul+li、dl+dt+ddの2通りの方法で試していますが、なかなかうまくいきません。

とりあえずどの様なCSS＋マークアップで試してみたのか、何例か（実際のソースを）見せて頂けませんか？

回答No.1

ORUKA1951

基本的なところでおかしい。
オリジナルのHTMLをお示しください。dlだったりulだったりはおかしい。
dlは定義リストですし、ulは順不同リストです。
HTMLの根本は、その部分が何であるかを示すマークアップですからね。
デザインのためにHTMLのソースをマークアップするのでは、tableを使ってデザインするのと根本的に同じ誤りですよ。