table表のデザインを変える

CSSで表組みのtableデザインを変えてみます

tableにwidthを指定せず各セルにwidth, border, paddingを指定。
width, padding, borderは重ならない。通常のBoxモデルと同じ。

HTMl

<div class="mod_hyou_001">
<table summary="">
<tr>
<th scope="row">見出し</th>
<td>説明文章が入ります。</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。説明文章が入ります。</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>説明文章が入ります。<br />
説明文章が入ります。</td>
</tr>
<tr>
<th scope="row">見出し</th>
<td>説明文章が入ります。</td>
</tr>
</table>
<!--mod_hyou_001_end--></div>

CSS

.mod_hyou_001 table{
	border-top:solid 2px #666;
	border-bottom:solid 2px #666;
}
.mod_hyou_001 table th,td{
	border-bottom:solid 1px #CCC;
	padding:5px;
}
.mod_hyou_001 table th{
	width:50px;
	vertical-align:top;
	font-weight:bold;
	border-right:solid 1px #CCC;
	white-space:nowrap;
}
.mod_hyou_001 table td{
	width:300px;
}