border-spacingプロパティの説明
CSSのborder-spacingプロパティは、テーブル（表）に含まれるセル同士の間隔を指定します。この値は、border-collapseの値がseparateの場合にのみ効果があります。
表のセルは通常、密着した状態で格子状に配置されます。その状態を制御するのがborder-collapseプロパティで、その隙間をどれぐらい空けるのかを示すのがborder-spacingプロパティです。
ここで指定した値は、表の外周との距離にも影響します。表そのものにborderやbackgroundが指定されていれば、その境界の内側に間隔を空けてセルが並びますが、しかし表に境界線や背景色が指定されていないと、見えない境界に対して隙間を空けるので気をつけて下さい。
border-spacingに指定できる値
<length>- CSSで使用できる長さを表すデータ型の値です。ピクセル値やインチ、メートル法の単位などを扱う絶対的な指定、フォントサイズやビューポートの値を参照する相対的な指定が可能です。
border-spacingの使い方とサンプルコード
border-spacingプロパティの構文は以下の通りです。
/* <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の値を変えた場合の挙動を確認します。
<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>
.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;
}
この値は、border-collapseの値がseparateでなければ無効となります。上記の表と同じ内容に、セルを密着させるborder-collapse: collapse;を指定した場合は、その間隔がリセットされます。
#table_1 > table {
border-collapse: collapse;
border-spacing: 10px;
}
#table_2 > table {
border-collapse: collapse;
border-spacing: 2rem 0.5rem;
}