構文

border-collapse : 値;

説明文

　「border-collapse」はセル間または，表枠とセル間の枠線を一体化する。表のセルはそれぞれが独立した矩形の範囲をしている。このセル同士の枠線を一体化するか離すかを指定できる。「collapse」を指定すれば枠線を一体化し，「separate」を指定すれば枠線が分かれて表示する。

　また，「border-spacing」にてセル間の間隔を指定することが可能だ。

使用例

● CSSの定義

table { border-collapse : collapse ; }
th, td { border : 2px solid #000080;
         padding : 3px; }

● HTMLの例

<h2>日経BP社の雑誌</h2>
<table>
	<tr>
		<th>雑誌名</th>
		<th>販売形態</th>
		<th>年間購読料</th>
	</tr>
	<tr>
		<td>日経パソコン</td>
		<td>直販</td>
		<td>1万3800円</td>
	</tr>
	<tr>
		<td>日経ビジネス</td>
		<td>直販</td>
		<td>2万3000円</td>
	</tr>
	<tr>
		<td>日経Linux</td>
		<td>店頭販売</td>
		<td>1万7880円</td>
	</tr>
	<tr>
		<td>日経トレンディ</td>
		<td>店頭販売</td>
		<td>6480円</td>
	</tr>
</table>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目