CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)

CSSのテーブルの枠線の間隔を指定するサンプルです。
border-spacingプロパティを使用します。

border-spacing プロパティ

border-spacing : 値 → 上下左右を指定
border-spacing : 値 値 → 左右と上下を指定
説明
数値 + 単位   指定した単位で設定します。 
値を継承する
  • 初期値は0です。
  • テーブルに使用します。
  • border-spacingプロパティは、枠線(ボーダー)の間隔を指定します。
  • border-collapseプロパティの値がseparate(枠線を離して表示)のときのみ使用します。
  • 以下はMDNのborder-spacingプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/border-spacing

コード

サンプルのコードです。
4,9行目でborder-spacingプロパティを使用しています。

<style>
#table1{
	border-collapse:separate;
	border-spacing:5px;
	margin-bottom:10px;
}
#table2{
	border-collapse:separate;
	border-spacing:15px;
}
table,th,td{
	border: 1px solid #000;
}
</style>
</head>
<body>
<table id="table1">
	<tr><th>No.</th><th>名前</th></tr>
	<tr><td>1</td><td>赤</td></tr>
	<tr><td>2</td><td>黄</td></tr>
	<tr><td>3</td><td>青</td></tr>
</tr>
</table>
<table id="table2">
	<tr><th>No.</th><th>名前</th></tr>
	<tr><td>1</td><td>赤</td></tr>
	<tr><td>2</td><td>黄</td></tr>
	<tr><td>3</td><td>青</td></tr>
</tr>
</table>
</body>

サンプル

上記コードのサンプルです。
border-spacingの設定は上から5px、15pxです。

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS ボーダーの表示方法を指定するサンプル(border)



△上に戻る