Css-border-spacing
提供:Dev Guides
CSS-ボーダー間隔
説明
border-spacingは、テーブルがseparate-bordersモデルを使用してレンダリングされると仮定して、テーブル内のセル間の距離を設定します。
可能な値
- length -任意の長さの単位。 2つの値が宣言されている場合、最初の値は水平軸に沿った間隔に適用され、2番目の値は垂直軸に適用されます。
に適用されます
テーブルまたはインラインテーブルが表示される要素。
DOM構文
object.style.borderSpacing = "2px";
例
ここにボーダー間隔の使用法を示す例があります-
注-このプロパティはIE 6またはNS 7では機能しません。
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br/>
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
これにより、次の結果が生成されます–