[新着] Webテンプレートを仮オープンしました
border-spacing は、セルの枠線の間隔（間隔の大きさ）を指定するプロパティです。
このスタイルはtable要素に適用できます。
※border-collapse プロパティで separate（間隔をあけて表示）が設定されている場合に有効です。
table {
border: 2px #000000 solid;
border-spacing: 10px;
}
| border-spacing | 間隔の大きさを指定します |
|---|
間隔の大きさは、数値+単位（px、他）で指定します。
【指定方法】
border-spacing: 5px; … ［上下左右］ を指定
border-spacing: 5px 10px; … ［左右］ と ［上下］ を指定
上記例のように、2タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table {
border: 2px #2b2b2b solid;
border-collapse: separate;
margin-bottom: 20px;
}
td, th {
border: 2px #2b2b2b solid;
}
#example1 {
border-spacing: 5px;
}
#example2 {
border-spacing: 30px 5px;
}
-->
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">指定なし</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>サーバーB社</td>
</tr>
</table>
<table id="example1">
<tr>
<th colspan="2">上下左右に5px</th>
</tr>
<tr>
<td>サーバーC社</td>
<td>サーバーD社</td>
</tr>
</table>
<table id="example2">
<tr>
<th colspan="2">上下に5px、左右に30px</th>
</tr>
<tr>
<td>サーバーE社</td>
<td>サーバーF社</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| 指定なし | |
|---|---|
| サーバーA社 | サーバーB社 |
| 上下左右に5px | |
|---|---|
| サーバーC社 | サーバーD社 |
| 上下に5px、左右に30px | |
|---|---|
| サーバーE社 | サーバーF社 |
