テーブル(表)の行方向のみにセルの間隔をあける、または、列方向のみにセル間隔をあけるコードを紹介します。
概要
テーブルの行方向、列方向を指定してセルの間隔をあける場合は、border-collapse を separate に設定した状態で、border-spacing に2つ値を指定します。
テーブルの列方向に余白を開ける
コード
下図のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="TableBorderSpacing.css" />
</head>
<body>
<table class="ProductTable">
<caption align="top">商品表</caption>
<tr>
<td>ぺんぎんクッキー</td>
<td>250円</td>
<td>120g</td>
</tr>
<tr>
<td>あひるケーキ</td>
<td>380円</td>
<td>80g</td>
</tr>
<tr>
<td>らくだチョコレート</td>
<td>120円</td>
<td>45g</td>
</tr>
<tr>
<td>かるがもキャンディー</td>
<td>160円</td>
<td>21g</td>
</tr>
</table>
</body>
</html>
.ProductTable {
border: solid 1px #000000;
border-collapse: separate;
border-spacing: 8px 0px;
}
.ProductTable td {
border: solid 1px #000000;
border: solid 1px #007275;
}
解説
下記コードでborder-collapseプロパティをseparateに設定することでテーブルのセル間には余白が入る状態となります。
border-collapse: separate;
border-spacingプロパティでセル間の余白を設定します。1つ目の値が列方向の余白、2つ目の値が行方向の余白となります。下記のコード例では列方向に8ピクセルの余白を開けます。
border-spacing: 8px 0px;
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の表示結果となります。テーブルのセルの列方向の余白が開いていることが確認できます。
テーブルの列方向に余白を開ける
テーブルの列方向に余白を開けます。テーブルの列方向に余白を開ける場合は、border-spacingプロパティの2番目の値に余白のサイズを指定します。
コード
先のコードのCSSファイルを下記に修正します。
.ProductTable {
border: solid 1px #000000;
border-collapse: separate;
border-spacing: 0px 8px;
}
.ProductTable td {
border: solid 1px #000000;
border: solid 1px #007275;
}
解説
border-spacingプロパティでセル間の余白を設定します。1つ目の値が列方向の余白、2つ目の値が行方向の余白となります。下記のコード例では行方向に8ピクセルの余白を開けます。
border-spacing: 8px 0px;
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の表示結果となります。テーブルのセルの行方向の余白が開いていることが確認できます。
実用的な例
先のコードはわかりやすくするためにすべての罫線を表示するCSSを利用しました。実際の利用では下記のような表示の場合に使われます。
例1
.ProductTable {
border-collapse: separate;
border-spacing: 4px 0px;
}
.ProductTable td {
background-color:#a6d6ff;
}
上記のCSSの結果は下図になります。
例2
.ProductTable {
border-collapse: separate;
border-spacing: 0px 8px;
}
.ProductTable td {
background-color:#d1f5f5;
border-bottom:solid 2px #0094ff;
}
上記のCSSの結果は下図になります。
参考：余白を0に設定した場合
border-spacingプロパティで行方向、列方向ともに0を指定した場合はは下図の表示結果となります。
.ProductTable {
border: solid 1px #000000;
border-collapse: separate;
border-spacing: 0px 0px;
}
.ProductTable td {
border: solid 1px #000000;
border: solid 1px #007275;
}
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2019-12-10
作成日: 2018-01-25
