border-spacing

CSSでは、表のセルとセルの間隔を調整することができます。

本ページでは、border-spacingプロパティについて説明します。

border-spacingプロパティとは

border-spacingプロパティは、セル間隔を調整します。例えば、セル間を広げて表示することができます。

border-spacingの説明

border-spacingの定義は、以下のとおりです。

【border-spacingの定義】
length | inherit
初期値 0
適用対象 table、inline-table
継承 する

値の説明

以下は、border-spacingで使える値と説明です。

length
セルとセルの間隔を数値と単位で指定します。1つ指定すると、上下左右の間隔になります。半角スペースに続けて2つ指定すると、1つめが左右、2つめが上下の間隔になります。マイナスは、使えません。

border-spacingは、border-collapseがseparateの時だけ適用されます。collapseの時は、セル間の間隔がなくなるため、border-spacingで指定した値は適用されません。

利用例

利用例を示すために、以下のHTMLを使います。

【border-spacingの利用例を示すためのHTML】
<table class="test">
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
</table>

上記に、CSSで枠や色を付けると、以下のように表示されます。

border-spacingのデフォルト表示

これが、border-spacingのデフォルトです。

CSSに以下を追加します。

【lengthの利用例(縦横一括)】
.test {
  border-spacing: 6px;
}

上記により、以下のように表示されます。

border-spacingを利用した時の表示例(縦横一括)

セル間の間隔が広くなっています。

CSSを以下のように記述してみます。

【lengthの利用例(縦横別々)】
.test {
  border-spacing: 6px 1px;
}

上記により、以下のように表示されます。

border-spacingを利用した時の表示例(縦横別々)

左右が6px、上下が1pxの間隔になっています。

補足

border-spacing:0;を指定すると、border-collapseでcollapseを指定した時と同じになりそうですが、実際は同じではありません。以下は、border-collapseでcollapseを指定した時の表示例です。

border-collapseでcollapseを指定した時の表示例

以下は、border-spacing:0;を指定した時の表示例です。

、border-spacingで0を指定した時の表示例

border-collapseでcollapseを指定すると、セル間で罫線を共有します。このため、一本の線になります。border-spacing:0;では、二重線のままで間隔が0になるだけです。このため、線が太くなったように見えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
border-spacing
【スマートフォン】
項目 Sa An Op Ch Fx Sm
border-spacing
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「HTMLに表を挿入して装飾する

CSSプロパティ一覧」に戻る