CSS | border-collapse / border-spacing / empty-cells | <table>要素の罫線

テーブルの罫線を設定するための3つのCSSプロパティを解説します。

このページで解説するCSSプロパティ
CSSプロパティ	設定内容	デフォルト値	その他の設定値
`border-collapse`	`<table>`要素の罫線の間隔の有無。	`collapse`	`separate`
`border-spacing`	`<table>`要素の罫線の間隔の幅。 ※ `border-collapse: separate;`の場合のみ有効。
`empty-cells`	`<table>`要素の空セルに対する罫線の表示/非表示。 ※ `border-collapse: separate;`の場合のみ有効。	`show`	`hide`

`border-collapse` | 間隔の有無

<table>要素を準備します。

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

実行結果初期状態

🍎	🍋
🍉		🍈

border-collapseで罫線の間隔の有無を設定します。

`border-collapse`の設定値
設定値	罫線の間の間隔	デフォルト
`separate`	間隔あり
`collapse`	間隔なし

<table>要素に対してborder-collapseをseparateに設定すると、罫線の間隔(青線と赤線の間)が開きます。 collapseに変更すると間隔が無くなります。(デフォルト値)

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
}

実行結果separate 間隔あり

🍎	🍋
🍉		🍈

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: collapse;
}

実行結果collapse 間隔なし

🍎	🍋
🍉		🍈

`border-spacing` | 間隔の幅

border-spacingはborder-collapseがseparateの場合のみ有効です。

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
}

実行結果初期状態

🍎	🍋
🍉		🍈

border-spacingで<table>要素の罫線の間隔の幅を指定します。以下はborder-spacingが30px、15px、0の例です。

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    border-spacing:  30px;
}

実行結果30px

🍎	🍋
🍉		🍈

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    border-spacing:  15px;
}

実行結果15px

🍎	🍋
🍉		🍈

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    border-spacing:  0;
}

実行結果0

🍎	🍋
🍉		🍈

border-spacingが大きいほど間隔は広くなります。

2つの設定値

2つの設定値を指定して、「上下」の幅と「左右」の幅を個別に指定することもできます。

`border-spacing`の設定値の数
設定値の数	1つ目	2つ目
1	上下左右	-
2	左右	上下

border-spacingに対して、40px 10pxと10px 40pxと設定した例です。

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    border-spacing:  40px 10px;
}

実行結果40px 10px

🍎	🍋
🍉		🍈

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    border-spacing:  10px 40px;
}

実行結果10px 40px

🍎	🍋
🍉		🍈

`empty-cells` | 空セルの非表示

empty-cellsはborder-collapseがseparateの場合のみ有効です。

`empty-cells`の設定値
設定値	空セルの罫線	デフォルト
`hide`	非表示
`show`	表示

border-collapseで<table>要素の空セルを表示するか否かを指定します。 border-collapseをseparateに指定します。罫線の間隔が開きます。

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table  {
    border-collapse: separate;
}

実行結果初期状態

🍎	🍋
🍉		🍈

empty-cellsをhideにすると空セルの罫線は非表示になります。 showに変更すると表示されます。(デフォルト値)

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    empty-cells:     hide;
}

実行結果hide

🍎	🍋
🍉		🍈

HTML


<table>
    <tr>
        <td>🍎</td>
        <td>🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>🍉</td>
        <td><!-- 空セル --></td>
        <td>🍈</td>
    </tr>
</table>

CSS


table {
    border:  7px solid red;  /* 境界線 */
}

td {
    border:  5px solid blue; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;
    empty-cells:     show;
}

実行結果show

🍎	🍋
🍉		🍈

border-collapse | 間隔の有無

border-spacing | 間隔の幅

2つの設定値

empty-cells | 空セルの非表示

`border-collapse` | 間隔の有無

`border-spacing` | 間隔の幅

`empty-cells` | 空セルの非表示