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>

これにより、次の結果が生成されます–

Css-border-spacing

CSS-ボーダー間隔

説明

可能な値

に適用されます

DOM構文

例

目次