【CSS】table(テーブル)のtd 要素間の隙間を設定する

スポンサーリンク

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

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

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

使用例


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

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

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;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト