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

最終更新日:

公開日:2024-11-20

ページ内に広告が含まれています。
テーブルのセル同士の間隔を指定する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の他にemremなども指定できます。

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

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プロパティの使い方について解説しました。
テーブルのデザインによっては使用する事もありますので、覚えておくと便利です。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP