2022-08-10

CSS: table（テーブル）のtd 要素間の隙間を設定する

CSS でtable（テーブル）の　td 要素間の隙間を設定するには、 border-spacing プロパティを使用します。

border-spaceing プロパティは、隣接する各セルのボーダーとボーダーの間隔を設定します。 言い換えると、td 要素間の隙間（間隔）を設定することと同じです。

前提としてborder-collapse プロパティの値が「separate（分離）」となっている 必要があります。「collaplse（重ねて表示）」の場合は、そもそも隙間がありません。

border-spacing 使用例

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

値の指定は実数値＋単位です。値が１つだけの場合は上下左右に適用されます。 値をスペース区切りで２つ指定した場合は左右、上下に適用されます。

border-spacing: 3px;  /* 上下左右 3px */

border-spacing: 1px 2px; /* 左右 1px、上下 2px */

td 要素間の隙間を設定するサンプルコード

次のテーブルは、要素間の隙間を「5px」に指定しています。

データ	データ
データ	データ
データ	データ

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

table, td {
    border: 1px solid black;
}