DL,DT,DD を見栄え良くするCSSサンプル

<dl>
<dt>あ行</dt>
<dd>あいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
</dl>

dl.sample4 dd {
	margin-left:5px;
	padding:5px;
	background-color:#ddeeff;
}

<dl>
<dt>あ行</dt>
<dd>あいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
</dl>

dl.sample {
	border-bottom:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	background-color:#ddeeff;
	margint:5px;
}
dl.sample dt {
	float:left;
	clear: left;
	width:100px;
	font-weight:bold;
	background-color:#ddeeff;
	border-top:1px solid #ccc;
	padding:5px;
}
dl.sample dd {
	background-color:#ffffff;
	border-top:1px solid #ccc;
	margin-left:110px;  
	padding:5px;
}

<dl class="sample">
<dt>あ行</dt>
<dd>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
</dl>

dl.sample2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #c3e1ff), color-stop(1.00, #ddeeff));
	background: -webkit-linear-gradient(#c3e1ff, #ddeeff);
	background: -moz-linear-gradient(#c3e1ff, #ddeeff);
	background: -o-linear-gradient(#c3e1ff, #ddeeff);
	background: -ms-linear-gradient(#c3e1ff, #ddeeff);
	background: linear-gradient(#c3e1ff, #ddeeff);
	border-radius:10px;
	box-shadow:0px 0px 5px 1px #ddeeff;
}
dl.sample2 dt {
	float:left;
	clear: left;
	width:100px;
	font-weight:bold;
	padding:5px;
	text-shadow:0px 0px 3px #999;
	border-top:1px solid #ccc;

}
dl.sample2 dd {
	margin-left: 110px;  
	padding:5px;
	border-top:1px solid #ccc;
	font-size:smaller;
}
dl.sample2 dt:first-child
{
	border:none;
}
dl.sample2 dt:first-child + dd
{
	border:none;
}

<dl class="sample2">
<dt>あ行</dt>
<dd>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
<dt>た行</dt>
<dd>たちつてと</dd>
</dl>

dl.chart dt {
	text-align:left;
	font-weight:bold;
	color:navy;
	padding:5px;
}
dl.chart dd {
	background-color:#ddeeff;
	margin:5px 5px 5px 15px;
	padding:5px 5px 5px 15px;
	border-radius:5px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #efe457), color-stop(1.00, #feae31));
	background: -webkit-linear-gradient(#efe457, #feae31);
	background: -moz-linear-gradient(#efe457, #feae31);
	background: -o-linear-gradient(#efe457, #feae31);
	background: -ms-linear-gradient(#efe457, #feae31);
	background: linear-gradient(#efe457, #feae31);
}

<dl class="chart">
<dt>グラフA</dt>
<dd style="width:47%;"><div style="padding-right:5px;">8月1日 47%</div></dd>
<dd style="width:23%;"><div style="padding-right:5px;">8月2日 23%</div></dd>
<dt>グラフB</dt>
<dd style="width:47%;"><div style="padding-right:5px;">8月1日 47%</div></dd>
<dd style="width:80%;"><div style="padding-right:5px;">8月2日 80%</div></dd>
</dl>