border-spacing

外枠とセル、及び、セルとセルの間隔を指定します。


ブラウザ

N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2

▲PageTop

書式

・「上下左右」を指定

要素[.class名][#id名]{ border-spacing : 値; }

・「左右 上下」を指定

要素[.class名][#id名]{ border-spacing : 値 値; }

▲PageTop

指定できる値

値 初期値 意味
数値+単位 間隔を指定します。単位例：px,em,ex
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border-spacing : 10px;
      }
      #sample2 {
        border-spacing : 10px 20px;
      }
      #sample table {
        border-collapse : separate;
        border : 1px solid #000000;
        width : 50%;
      }
      #sample td {
        border : 1px solid #000000;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <table id="sample1">
        <caption>【 border-spacing : 10px 】</caption>
        <tr>
          <td>値を一つだけ指定した場合の間隔</td>
          <td>10px</td>
        </tr>
        <tr>
          <td>上下左右の間隔 10px</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <br>
      <table id="sample2">
        <caption>【 border-spacing : 10px 10px 】</caption>
        <tr>
          <td>値を二つ指定した場合の間隔</td>
          <td>10px　20px</td>
        </tr>
        <tr>
          <td>左右の間隔 10px 上下の間隔 20px</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
  </body>
</html>

表示結果

【 border-spacing : 10px 】
値を一つだけ指定した場合の間隔 10px
上下左右の間隔 10px  

【 border-spacing : 10px 10px 】
値を二つ指定した場合の間隔 10px　20px
左右の間隔 10px 上下の間隔 20px  

▲PageTop

関連項目

HTML

<table>

▲PageTop

▲