【CSS/table】border-collapseの属性

隣り合ったテーブルセルの枠線の描画方法を指定します。

値(Value)

collapse	セルの枠線を離して表示します。初期値。
separate	セルの枠線を重ねて表示します。

border-collapse:separate;

<head>
 <style type="test/css">
.separate{
border-collapse: separate;
border-spacing: 3px;
border: 1px solid #ccc;
margin-left:10px;
}
.separate th{
width: 30%;
padding: 5px;
background-color: #ccc;
border: 1px solid #ccc;
}
.separate td{
padding: 5px;
background-color: #fafafa;
border: 1px solid #ccc;
}
 </style>
</head>
 
<body>
 <table class="separate">
 <tr><th>Age</th><td>28</td></tr>
 <tr><th>height</th><td>172cm</td></tr>
 </table>
</body>

border-spacing;

セルのボーダーとボーダーの間隔(距離)を指定するプロパティです。
「separate 」値が指定されている時のみ有効です。初期値は「0」です。
↓結果、下記のように表示されます。

border-collapse:separate;

Age	28
height	172cm

border-collapse:collapse;

<head>
 <style type="test/css">
.collapse{
border-collapse: collapse;
border: 1px solid #ccc;
margin-left:10px;
}
.collapse th{
width: 30%;
padding: 5px;
background-color: #d8f550;
border: 1px solid #ccc;
}
.collapse td{
padding: 5px;
background-color: #fafafa;
border: 1px solid #ccc;
}
 </style>
 </head>
 
<body>
 <table class="collapse">
 <tr><th>Age</th><td>28</td></tr>
 <tr><th>height</th><td>172cm</td></tr>
 </table>
</body>

↓結果、下記のように表示されます。

border-collapse:collapse;

Age	28
Height	172cm