CSS テーブルの枠線を重ねる/離すサンプル(border-collapse) |

CSSのテーブルの枠線を重ねる/離すサンプルです。
border-collapseプロパティを使用します。

border-collapse プロパティ

border-collapse : 値

値	説明
collapse	枠線(ボーダー)を重ねて表示します。
separate	枠線(ボーダー)を離して表示します。(初期値)
値を継承する

テーブルに使用します。
テーブルの枠線を重ねるまたは、離します。
以下はMDNのborder-collapseプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse

サンプル

border-collapseのサンプルです。
上のテーブルがcollapseです。枠線(ボーダー)を重ねて表示します。
下がseparateです。枠線(ボーダー)を離して表示します。

コード

上記サンプルのコードです。

<style>
#table1{
	border-collapse:collapse;
	margin-bottom:10px;
}
#table2{
	border-collapse:separate;
}
table,th,td{
	border: 1px solid #000;
}
</style>

<table id="table1">
	<tr><th>No.</th><th>名前</th></tr>
	<tr><td>1</td><td>赤</td></tr>
	<tr><td>2</td><td>黄</td></tr>
	<tr><td>3</td><td>青</td></tr>
</tr>
</table>
<table id="table2">
	<tr><th>No.</th><th>名前</th></tr>
	<tr><td>1</td><td>赤</td></tr>
	<tr><td>2</td><td>黄</td></tr>
	<tr><td>3</td><td>青</td></tr>
</tr>
</table>