border-spacing:表(テーブル)に含まれるセル同士の間隔を指定する

初期値 0
適用対象 tableinline-table要素
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

border-spacingプロパティの説明

border-spacingは、表(テーブル)に含まれるセル同士の間隔を指定します。この値は、border-collapseの値がseparateの場合にのみ効果があります。

表のセルは通常、密着した状態で格子状に配置されます。その状態を制御するのがborder-collapseプロパティで、その隙間をどれぐらい空けるのかを示すのがborder-spacingプロパティです。

ここで指定した値は、表の外周との距離にも影響します。表そのものにborderbackgroundが指定されていれば、その境界の内側に間隔を空けてセルが並びますが、しかし表に境界線や背景色が指定されていないと、見えない境界に対して隙間を空けるので気をつけて下さい。

border-spacingに指定できる値

<length>
CSSで使用できる長さを表すデータ型の値です。ピクセル値やインチ、メートル法の単位などを扱う絶対的な指定、フォントサイズやビューポートの値を参照する相対的な指定が可能です。

border-spacingの使い方とサンプル

border-spacingプロパティの構文は以下の通りです。

CSS
/* <length>値 */
border-spacing: 3px;
border-spacing: 10pt;
border-spacing: 1rem;
border-spacing: 5vmax;

/* 左右の間隔 | 上下の間隔 */
border-spacing: 10px 20px;
border-spacing: 1em 0.5rem;

/* グローバル値 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: unset;

border-spacingの実例

それでは実際に簡単な例を見てみましょう。ここでは、共通のスタイルを持つ表を並べて、border-spacingの値を変えた場合の挙動を確認します。

表示確認
CSS
.samp_box {
	display: flex;
    flex-direction: row;
    flex-wrap: nowarp;
    justify-content: space-between;
    align-items: stretch;
	gap: 1rem;
	text-align: center;
}
.samp_box > div {
	flex: 1;
}
.samp_box table {
	width: 100%;
	border: 3px dashed #ccc;
	border-collapse: separate;
}
#table_1 > table {
	border-spacing: 10px;
}
#table_2 > table {
	border-spacing: 2rem 0.5rem;
}
table td {
	border-top: 3px solid #fc605b;
	border-right: 3px solid #fcc15b;
	border-bottom: 3px solid #76fc5b;
	border-left: 3px solid #5b96fc;
}
HTML
<section class="samp_box">
	<div id="table_1">
		<table>
			<caption>10px</caption>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
		</table>
	</div>
	<div id="table_2">
		<table>
			<caption>2rem 0.5rem</caption>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
			<tr>
				<td>td</td><td>td</td><td>td</td>
			</tr>
		</table>
	</div>
</section>

この値は、border-collapseの値がseparateでなければ無効となります。上記の表と同じ内容に、セルを密着させるborder-collapse: collapse;を指定した場合は、その間隔がリセットされます。

CSS
#table_1 > table {
	border-collapse: collapse;
	border-spacing: 10px;
}
#table_2 > table {
	border-collapse: collapse;
	border-spacing: 2rem 0.5rem;
}
表示確認

border-spacingに関連するCSSプロパティ

ボーダー・アウトライン
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-collapse 表のセル同士が隣接する境界線を共有するか分離するかを指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-spacing 表に含まれるセル同士の間隔を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する