このページで解説するコードの実行結果。

間隔なし : border-collapse: collapse;
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈
間隔あり : border-collapse: separate;
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈
間隔を広く : border-spacing: 10px;
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈
左右と上下で異なる幅 : border-spacing: 10px 20px;
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈
空セルの罫線を非表示 : empty-cells: hide;
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
table {
    border:  5px solid red;     /*  境界線  */
}
td {
    border:  5px solid blue;    /*  境界線  */
    padding: 10px;              /*  内側の余白  */
}

概要

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

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

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

border-collapse: separate;の場合、罫線の間隔が開く。

その場合、border-spacingempty-cellsが有効になる。

border-collapse

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

(表) border-collapseの設定値
設定値罫線の間の間隔デフォルト
collapse開けない
separate開ける
  • テーブルの<th><td>要素にborderプロパティを設定している場合のみ有効。
  • デフォルトでは、 罫線の間は間隔なし。

collapse : 罫線の間隔なし

CSS : collapseに設定
.sample  {
    border-collapse:    collapse;
}
HTML : 適用するHTML
<table class="sample">
    <tr>
        <td>りんご 🍎</td>
        <td>レモン 🍋</td>
        <td><!-- 空セル --></td>
    </tr>
    <tr>
        <td>スイカ 🍉</td>
        <td><!-- 空セル --></td>
        <td>メロン 🍈</td>
    </tr>
</table>
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

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

CSS : デフォルト値
.sample  {
                   
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

separate : 罫線の間隔あり

CSS : separate に設定
.sample  {
    border-collapse:    separate;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

border-spacing

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

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

(表) border-spacingの引き数の数
引き数の数第一引き数第二引き数
1上下左右-
2左右上下

10pxに指定する。

CSS : 10px
.sample  {
    border-collapse:    separate;
    border-spacing:     10px;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

20pxに指定する。

CSS : 20px
.sample  {
    border-collapse:    separate;
    border-spacing:     20px;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

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;

ほとんど使うことの無い話であるが説明しておく。 以下では、デフォルトCSSを含めたCSSを記述する

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

CSS : デフォルトCSS + separate
table {
    border:     5px solid red;
}
td {
    border:     5px solid blue;
    padding:    10px;
}
.sample  {
    border-collapse:    separate;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

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

CSS : デフォルトCSS + collapse
table {
    border:     5px solid red;
}
td {
    border:     5px solid blue;
    padding:    10px;
}
.sample  {
    border-collapse:    collapse;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

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

CSS : 赤線を太く
table {
    border:     6px solid red;
}
td {
    border:     5px solid blue;
    padding:    10px;
}
.sample  {
    border-collapse:    collapse;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

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

CSS : 青線をさらに太く
table {
    border:     6px solid red;
}
td {
    border:     7px solid blue;
    padding:    10px;
}
.sample  {
    border-collapse:    collapse;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

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

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

CSS : デフォルトCSS + collapse
table {
    border:     5px solid red;
}
td {
    border:     5px solid blue;
    padding:    10px;
}
.sample  {
    border-collapse:    collapse;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

<td>要素のborder-stylehiddenにしてみる。罫線は全部消えた。赤線も見えない。(↓ 下の結果)

CSS : 「border-style: hidden;」
table {
    border:     5px solid red;
}
td {
    border:     5px hidden blue;
    padding:    10px;
}
.sample  {
    border-collapse:    collapse;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

一方、<td>要素のborder-stylenoneにしてみる。赤線は見える。(↓ 下の結果)

CSS : 「border-style: none;」
table {
    border:     5px solid red;
}
td {
    border:     5px none blue;
    padding:    10px;
}
.sample  {
    border-collapse:    collapse;
}
実行結果
りんご 🍎 レモン 🍋
スイカ 🍉 メロン 🍈

この意味は、border-stylenoneにすると、全く無くなってしまうということ。 よって、隠されていた赤線が見えるようになった。

border-style: hidden;の場合、青線自体は隠されたが、何かがまだ存在していて赤線を隠し続けている。(ややこし。。。)

これが、nonehiddenの違いであるが、まず使うことはない。

Emmet

記述Visual Studio Code
bdclborder-collapse: collapse;
bdclsborder-collapse: separate;
bdspborder-spacing: ;
bdsp5border-spacing: 5px;
ecempty-cells: show;
echempty-cells: hide;