tableのborder-collapse

2014/4/28 CSS, HTML

tableタグで表組みを作成するとき、border-collapse:collapse を使う場合が多いかと思いますが、separate も使い方によっては便利なのです。

collapse：隣接するセルのボーダーを重ねて表示
separate：隣接するセルのボーダーの間隔をあけて表示

HTML

<table>
<caption>border-collapse：<strong>collapse</strong></caption>
<tbody>
<tr>
<th>タイトル1</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル2</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル3</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>


<table cellspacing="1" class="saparate"><!-- cellspacingはIE表示用 -->
<caption>border-collapse：<strong>separate</strong></caption>
<tbody>
<tr>
<th>タイトル1</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル2</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル3</th>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>

CSS

table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
}
table caption {
  text-align: left;
}
table th,
table td {
  border: 1px solid #555;
  padding: 6px;
}
table th {
  background: #fcc;
  font-weight: normal;
  white-space: nowrap;
}
table td {
  background: #cfc;
}
.saparate {
  background: #555;
  border-spacing: 1px;
  border-collapse: separate;
  width: 100%;
}
.saparate th {
  border: 1px solid #fff;
  color: #666;
}
.saparate td {
  border: 1px solid #fff;
}

表示サンプル

サンプルhtml

表組みのサンプル

上手に使い分ければ、表現の幅が広がりますね。