CSSで<dl>を使ったテーブルレスデザイン。

質問

<dl>要素を使って、テーブルライクなデザインを行ないたいと思っています。

<dd>要素が何行になるか不確定である場合に、CSSでどのように記載すればテーブルのようなデザインに出来るでしょうか？

つまり、
　<table>
　<tr>
　<td>タイトル</td>
　<td>内容1<br />内容2<br />内容3<br />内容4<br />内容5<br />内容6<br /></td>
　</tr>
　</table>
↑を、
　<dl>
　<dt>タイトル</dt>
　<dd>内容1<br />内容2<br />内容3<br />内容4<br />内容5<br />内容6<br /></dd>
　</dl>
↑に、置き換えたいと思っています。
<dt>の内容に同じ数だけ改行を加える、という手法は避けたいと考えています。

回答No.3

UKY

ここらへんが参考になるかも。

http://web.webmeister-jp.com/design/tips/css_layout.php
http://aor.ktplan.jp/hms/tab2css2

ただ、「スタンダードな手法」というものはまずありえないと思います。
まずスタイル抜きの純粋な文書(HTML)があって、そこにスタイルシートを付け加える、というのが本来の考え方ですから、HTMLが違えば当然それに合わせてスタイルシートも変えてやる必要があります。テーブルをスタイルシートに置き換えるためのスタンダードな手法を見出すとそれに固執してスタイルシートに合わせてHTMLを書くという本末転倒に陥りかねません。

参考URL：

http://web.webmeister-jp.com/design/tips/css_layout.php,http://aor.ktplan.jp/hms/tab2css2

回答No.2

UKY

まず何のためにテーブルを使わないデザインをしようと思ったのでしょうか? テーブルでレイアウトするのは邪道だというのなら、<br>で改行してレイアウトするのも邪道だと思うのですが。そうじゃないのかな。

で、とりあえずCSSでこれを表のように見せたいと思ったなら、素直にやるとこうなります。

<dl style="display:table-row">
<dt style="display:table-cell;vertical-align:middle">タイトル</dt>
<dd style="display:table-cell">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
<p>内容5</p>
<p>内容6</p>
</dd>
</dl>

もっとも、某有名ブラウザではうまくいかないですが。

補足

<br>で改行しているのは、あくまでサンプルとして使用しているだけで、実際には使ってません。

<dl>でテーブルライクレイアウトというのは、今後は頻繁に使われそうな構成だと思うのですが、現状の各ブラウザ共通で同様に表示させるようなスタンダードな手法というのはないものなんでしょうか？（多少トリッキーでも問題ありません。）

回答No.1

BLUEPIXY

やりたいことは、なんとなくわかりますが、
＜ｄｌ＞要素がどのように表示されるかは、
ブラウザ依存なので、
事実上ムリだと思います。
position:relative
である程度それらしくはできるかもしれませんけど。
あるブラウザで、それらしく表示はできても
別のブラウザでは、ぐちゃぐちゃになってしまうかもしれません。