border-collapseとは
テーブルセルにて、隣接するボーダーラインを重ねあわせて表示するにはborder-collapseプロパティを使う。このプロパティはデフォルトではないため、各々で設定する必要がある。
以下の値で指定する。
collapse
隣接するボーダーラインを重ねあわせて表示。
separate（初期値）
隣接するボーダーラインを離して表示。
Example
-
border-collapseプロパティを設定した場合の見た目( border-collapse: collapse; )
-
border-collapseプロパティを設定しない場合の見た目
適当にHTMLファイルを作ってコピペし、開いて確認してください。
<!DOCTYPE html>
<html lang="ja">
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #333;
}
</style>
<body>
<table>
<tr>
<th>果物</th> <th>味</th>
</tr>
<tr>
<td>いちご</td> <td>甘い</td>
</tr>
<tr>
<td>レモン</td> <td>酸っぱい</td>
</tr>
</table>
</body>
</html>