border-spacing: ***;
- ブラウザ
- 特性
- border-spacing
border-spacing は、セルの境界線の間隔を指定するプロパティです。
このスタイルはtable要素に適用することができます。
※この指定は、border-collapseプロパティで separate（境界線を分離）を指定している場合に有効です。
table {
border: 2px #000000 solid;
border-collapse: separate;
border-spacing: 5px;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border-spacing | 数値+単位（px 等） | 間隔の大きさを指定 （初期値は 0） |
【指定方法】
次のように、2タイプの指定方法があります。値は半角スペースで区切って記述します。
border-spacing: 5px;… ［上下左右］ を指定border-spacing: 10px 5px;… ［左右］ と ［上下］ を指定
CSS 2の仕様では 0 が初期値になっていますが、多くのブラウザでは2px程度の間隔があいてしまうようです。
IEでは、表示モードが「標準モード」の場合のみ機能するようです。（IE 7以下では未対応）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
table {
margin-bottom: 20px;
border: 2px #2b2b2b solid;
border-collapse: separate;
}
td, th {
border: 2px #2b2b2b solid;
}
table.example1 {
border-spacing: 5px;
}
table.example2 {
border-spacing: 30px 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">指定なし</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
<table class="example1">
<tr>
<th colspan="2">上下左右に5px</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
<table class="example2">
<tr>
<th colspan="2">左右に30px、上下に5px</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</body>
</html>
表示例
| 指定なし | |
|---|---|
| データセル1 | データセル2 |
| 上下左右に5px | |
|---|---|
| データセル1 | データセル2 |
| 左右に30px、上下に5px | |
|---|---|
| データセル1 | データセル2 |
- サイト内検索
