dlのcompact属性をスタイルシートで実現する

dlのコンパクト属性は、大変便利な属性ですが、ブラウザによって実装状況が異なることと、WEB標準では非推奨となっているため、スタイルシートで実現する必要があります。

compact属性のスタイルシート

モダンブラウザに対応しています。IE6への対応版は後述します。

表示例

dl { border: solid 1px silver; border-top: 0px; }
dt { background-color: #efefef; border-top: solid 1px silver; }
dd { background-color: #ccffcc; border-top: solid 1px silver; border-left: solid 1px silver; }

CSS

dl.compact { overflow: hidden; padding: 0px; }
dl.compact dt { float: left; clear: left; width: 100px; }
dl.compact dd { margin-left: 100px; padding: 0px;  }

HTML

<dl class="compact">
    <dt>タイトル１</dt>
    <dd>本文１</dd>
    <dt>タイトル２</dt>
    <dd>本文２<br>本文２</dd>
    <dt>タイトル３<br>タイトル３</dt>
    <dd>本文３<br><br></dd>
    <dt>タイトル４</dt>
    <dd>本文４</dd>
    <dd>本文４</dd>
    <dd>本文４</dd>
    <dt>タイトル５</dt>
    <dd>本文５</dd>
</dl>

モダンブラウザでは、本文３のようにdd要素の高さが横に並ぶdt要素の高さより低い場合に、その下のdd要素が上に寄ってしまいます。
また、IE6とIE7では本文３の左の罫線が下まで達していません。この対策としてdt要素とdd要素の高さが等しくなるように本文３の後ろに<br>を必要な数だけ追加しています。

HTMLの記述ルール

1. dtの高さよりddの高さが低い場合、dd要素の高さが横に並ぶdt要素の高さ以上になるように調整する。

compact属性のスタイルシート（IE6対応版）

IE6で前述の表示例を見た場合、下図のように本文の開始位置にガタつきが発生しているのに気づくと思います。

IE6での表示例

dd要素の横にdt要素の実体がある場合は、dd要素の行頭に3pxほど間隔があいてしまい、dd要素の横にdt要素の実体がないところ（背景が白色のところ）では間隔があいていません。
原因はよくわかりませんが、IE6だけの現象のようなのでCSSハックを使用して次のように対応します。

CSS

dl.compact { overflow: hidden; padding: 0px;  }
dl.compact dt { float: left; clear: left; width: 100px; }
dl.compact dd { margin-left: 100px; padding: 0px; }
* html dl.compact dt { margin-right: -3px; }
* html dl.compact dd { zoom:1; margin-left: 97px; }
* html dl.compact dd.adjust { margin-left: 100px; }

まずzoom:1でdd要素のhasLayoutをtrueにします。
するとdd要素内の位置はそろうのですが、今度はdt要素とdd要素の間に3pxの間隔があいてしまいますので、dt要素の右マージンを-3px、dd要素の左マージンを3px減らします。
次にマージンを3px減らしたせいで、本文４の2個目以降のddがずれるので、100pxに戻すadjustクラスを別途用意します。
作成したクラスは次のように使用します。

HTML

<dl class="compact">
    <dt>タイトル１</dt>
    <dd>本文１</dd>
    <dt>タイトル２</dt>
    <dd>本文２<br>本文２</dd>
    <dt>タイトル３<br>タイトル３</dt>
    <dd>本文３<br><br></dd>
    <dt>タイトル４</dt>
    <dd>本文４</dd>
    <dd class="adjust">本文４</dd>
    <dd class="adjust">本文４</dd>
    <dt>タイトル５</dt>
    <dd>本文５</dd>
</dl>

これで、IE6でもきれいに表示されるようになります。

表示例

HTMLの記述ルール

1. dtの高さよりddの高さが低い場合、dd要素の高さが横に並ぶdt要素の高さ以上になるように調整する。
2. 一つのdtに対して、ddを複数記述する場合、２つめ以降にadjustクラスを設定する。

最後に

brを続けて記述するのはあまり良くない記述方法と言われていますので、正しくはmin-heightを指定するか、スペーサーGIF等を使用するのが好ましいと思われます。

CSS3.0では、CSS2.0に存在したdisplay:compact;が復活する予定です。