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

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

border-collapse プロパティ

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

コード

サンプルのコードです。
3行目はcollapse、7行目はseparateを指定しています。

<style>
#table1{
	border-collapse:collapse;
	margin-bottom:10px;
}
#table2{
	border-collapse:separate;
}
table,th,td{
	border: 1px solid #000;
}
</style>
</head>
<body>
<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>
</body>

サンプル

上記コードのサンプルです。
上のテーブルがcollapseで下がseparateです。

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)




△上に戻る