テーブルのセル同士の間隔を指定するborder-spacingプロパティの使い方【CSS】

先日、隣り合ったテーブルセルの間隔を指定するborder-collapseプロパティについて【CSS】で解説したborder-collapseプロパティでseparateを指定した場合、セル同士の間隔の大きさをborder-spacingプロパティで指定できます。
今回はそのborder-spacingプロパティについて解説していきます。

border-spacingプロパティとは

border-spacingプロパティとは、テーブルのセル同士の間隔の大きさを指定出来るプロパティです。
セル同士の間隔は、先日隣り合ったテーブルセルの間隔を指定するborder-collapseプロパティについて【CSS】で解説した、border-collapseプロパティでseparateが指定されている場合のみ有効となります。

border-spacingプロパティの使い方

border-spacingプロパティは以下のコードをご覧ください。

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

上記のように、border-spacingプロパティはborder-collapseプロパティの値がseparateである場合のみ有効となります。
※border-collapseプロパティはデフォルトでseparateになっていますが、リセットCSSなどではcollapseになっている場合がありますのでご確認ください。

指定出来る単位は、pxの他にemやremなども指定できます。

左右と上下で別々の値を指定する

border-spacingプロパティは、以下のように左右と上下で別々の値を指定可能です。

table {
    border-collapse: separate;

    /* 左右が10px、上下が5px */
    border-spacing: 10px 5px;
}

※「左右」と「上下」という区分けになり、全てを別々の値に指定する事は出来ません。

使用例

すべて同じ値で指定した場合と、左右と上下で別々の値を指定した場合の使用例は以下のようになります。

すべて同じ値で指定した場合

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

左右と上下で別々の値を指定した場合

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

上記例のように、セル同士の間隔の大きさを使い分ける事も可能です。

さいごに

いかがでしたでしょうか。
今回は、テーブルのセル同士の間隔を指定するborder-spacingプロパティの使い方について解説しました。
テーブルのデザインによっては使用する事もありますので、覚えておくと便利です。