2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] border-spacingプロパティで表組みにおけるセルのボーダー間隔を指定しよう!

border-spacingの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.border-spacingとは?

border-spacingプロパティは表組みにおけるセルのボーダー間隔を指定する際に利用します。

値の指定方法は以下の通りです。

{ border-spacing: 値; }

値の指定方法

値は半角スペースで区切って2つまで指定できます。

値が2つの場合、1つ目は左右、2つ目は上下の間隔に適用されます。

値が1つの場合、上下左右に適用されます。

  • 任意の数値+単位




2.border-spacingの使い方

それではborder-spacingの使い方をみていきましょう。

以下のようにすることでセルのボーダー間隔が指定した値で表示されます。

table {
 table-layout: auto;
 border-spacing: 10px 20px;
 width: 100%;
}

他にも値を設定できるのでいろいろと試してみることをオススメします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です