border-collapse、 border-spacing、 empty-cells : <table>要素の罫線 - CSSプロパティ - Web開発

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

間隔あり

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

間隔を広く

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

左右と上下で異なる幅

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

空セルの罫線を非表示

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS


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

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

HTML : 適用するHTML


<table class="sample">
    <tr>
        <td>りんご 🍎</td>
        <td>レモン 🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>スイカ 🍉</td>
        <td><!-- 空セル --></td> 
        <td>メロン 🍈</td>
    </tr>
</table>

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

概要

<table>要素の罫線を設定する。

このページでは、下表のCSSプロパティの解説をする。

CSSプロパティ	機能
`border-collapse`	罫線の間の間隔の有無。
`border-spacing`	罫線の間の間隔の広さ。
`empty-cells`	空のセルに対する罫線の表示。

border-collapse: separate;の場合のみ、罫線の間隔が開き、border-spacingとempty-cellsが有効になる。

`border-collapse`

罫線の間の間隔の有無を指定。

（表） `border-collapse`の設定値
設定値	罫線の間の間隔	デフォルト
`collapse`	開けない	○
`separate`	開ける

テーブルの<th>や<td>要素にborderプロパティを設定している場合のみ有効。
デフォルトでは、罫線の間は間隔なし。

`collapse` : 罫線の間隔なし

CSS : collapseに設定


.sample  {
    border-collapse:    collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

デフォルト値はcollapseであることを確認する。

CSS : デフォルト値


.sample  {
                   
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

`separate` : 罫線の間隔あり

CSS : separate に設定


.sample  {
    border-collapse:    separate;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

この場合にのみ、 border-spacing とempty-cellsは有効になる。

`border-spacing`

罫線の間の間隔を指定。 border-collapse: separate;の場合のみ有効。

10pxに指定する。

CSS : 10px


.sample  {
    border-collapse:    separate;
    border-spacing:     10px;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

20pxに指定する。

CSS : 20px


.sample  {
    border-collapse:    separate;
    border-spacing:     20px;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

２つの引き数を指定して、「上下」の幅と「左右」の幅を個別に指定することもできる。

（表） `border-spacing`の引き数の数
引き数の数	第一引き数	第二引き数
1	上下左右	-
2	左右	上下

10px 20pxと指定する。第一引き数（10px）が左右、第二引き数（20px）が上下の幅になる。

CSS : 「左右」と「上下」で異なる幅


.sample  {
    border-collapse:    separate;
    border-spacing:     10px  20px;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

`empty-cells`

空のセルに対する罫線の表示。border-collapse: separate;の場合のみ有効。

空のセル（＝何も値が設定されていないセル）に対する罫線の表示の有無を指定できる。

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

CSS : 空セルを表示


.sample  {
    border-collapse:    separate;
    empty-cells:        show;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

CSS : 空セルを非表示


.sample  {
    border-collapse:    separate;
    empty-cells:        hide;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

`border-style: hidden;`

ほとんど使うことの無い細かい話であるが説明しておく。

borderのページでborder-styleの設定値について説明しているが、noneでもhiddenでも線が「非表示になる」ので「none = hidden」のように見える。

これが間違っていて、「none ≠ hidden」であることを説明する。

（以下では、デフォルトCSSを含めたCSSを記述し、あえてborderの指定を３行で書いている。）

まず、border-collapse: separate;の結果を復習。赤い<table>要素の枠線と青い<td>要素の枠線の両方が見える。（↓ 下の結果）

CSS : デフォルトCSS + separate


table {
    border-width:   5px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   5px;
    border-style:   solid;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: separate;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

次にborder-collapse: collapse;とした場合、<table>要素の枠線が見えなくなった。（↓ 下の結果）

CSS : デフォルトCSS + collapse


table {
    border-width:   5px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   5px;
    border-style:   solid;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

これは、赤線が青線に隠されているため。試しに、赤線を太く（6px）してみると、青線が赤線で隠された。（↓ 下の結果）

CSS : 赤線を太く


table {
    border-width:   6px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   5px;
    border-style:   solid;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

では、青線をさらに太く（7px）すると、再度赤線が隠される。つまり、太い方が優先されることが分かる。（↓ 下の結果）

CSS : 青線をさらに太く


table {
    border-width:   6px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   7px;
    border-style:   solid;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

で、本題の border-style: hidden;について。

コードを元に戻す。赤線は青線に隠されている。

CSS : デフォルトCSS + collapse


table {
    border-width:   5px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   5px;
    border-style:   solid;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

<td>要素のborder-styleをhiddenにしてみる。罫線は全部消えた。赤線も見えない。（↓ 下の結果）

CSS : 「border-style: hidden;」


table {
    border-width:   5px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   5px;
    border-style:   hidden;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

一方、<td>要素のborder-styleをnoneにしてみる。赤線は見える。（↓ 下の結果）

CSS : 「border-style: none;」


table {
    border-width:   5px;
    border-style:   solid;
    border-color:   red;
}

td {
    border-width:   5px;
    border-style:   none;
    border-color:   blue;

    padding:        10px;
}

.sample  {
    border-collapse: collapse;
}

実行結果

りんご 🍎	レモン 🍋
スイカ 🍉		メロン 🍈

この意味は「線が存在するか否か」にある。

hiddenの場合は「まだ存在している」。そして、後ろにある線を「見えなく」する。

一方、 noneの場合は「存在していない」。よって、後ろにある線は「見える」ようになる。

設定値	存在	後ろにある線
`hidden`	する	見えなくなる
`none`	しない	見える

ずいぶん哲学的な内容であるが、ほとんど使うことはない。

Emmet

記述	Visual Studio Code
`bdcl`	`border-collapse: collapse;`
`bdcls`	`border-collapse: separate;`
`bdsp`	`border-spacing: ;`
`bdsp5`	`border-spacing: 5px;`
`ec`	`empty-cells: show;`
`ech`	`empty-cells: hide;`

リンク

W3C（英語） > CSS 2.1 ( 勧告 ) > tables.html#borders

概要

border-collapse

collapse : 罫線の間隔なし

separate : 罫線の間隔あり

border-spacing

empty-cells

border-style: hidden;

Emmet

リンク

`border-collapse`

`collapse` : 罫線の間隔なし

`separate` : 罫線の間隔あり

`border-spacing`

`empty-cells`

`border-style: hidden;`