border-spacingプロパティ

テーブル要素・インラインテーブル要素において、セルとセルの間にある空白の広さを指定するプロパティです。border-collapseプロパティが「separate」のときのみ使用可能です。

初期値

2px
継承

継承あり
適用できる要素

テーブル要素、インラインテーブル要素

値

値は「数値 + 任意の単位」で指定することができます。

以前はtable要素のcellspacing属性でも同じようにセルとセルの間の空白を調整することが可能でしたが、HTML5以降はこの属性が廃止され、border-collapseプロパティとborder-spacingプロパティで調整するようになりました。

使用例

3パターンの値指定を行っている例です。

CSSコード例

<style>
.table1 {
	border-spacing: 2px;
}
.table2 {
	border-spacing: 5px;
}
.table3 {
	border-spacing: 1em;
}
</style>
<table class="table1">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円（税抜）</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円（税抜）</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円（税抜）</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td>100本</td>
		<td>120円（税抜）</td>
	</tr>
</table>
<table class="table2">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円（税抜）</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円（税抜）</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円（税抜）</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td>100本</td>
		<td>120円（税抜）</td>
	</tr>
</table>
<table class="table3">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円（税抜）</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円（税抜）</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円（税抜）</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td>100本</td>
		<td>120円（税抜）</td>
	</tr>
</table>

表示例：