border-spacing

border-spacingは、セルの枠線の間隔を指定するスタイルです。

解説

border-spacingはテーブルセルの枠線と枠線の隙間サイズを指定します。
同時に border-collapse:collapse;が指定されている場合は、この指定は無効になります。

border-spacingは trやtdタグではなく、tableタグに対して指定します。

指定した値の数により以下の違いがあります。

• 値を１つ指定した場合：セルの上下左右の間隔が指定した値になる
• 値を２つ指定した場合：１つ目の値がセルの左右、２つ目の値がセルの上下の間隔となる

構文

構文は以下になります。

値

border-spacingには以下の値が指定できます。

border-spacingの初期値は0です。

サンプル

枠線の間隔をすべて10pxにする

table{
  border-collapse:separate;
  border-spacing:10px;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td>丑</td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td>午</td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td>亥</td></tr>
</table>

枠線の間隔を左右を30px、上下を10pxにする

table{
  border-collapse:separate;
  border-spacing:30px 10px;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td>丑</td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td>午</td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td>亥</td></tr>
</table>

（参考）枠線の間隔を指定しない場合

table{
  border-collapse:separate;
}
td{
  border:1px solid black;
}

<table>
  <tr><td>子</td><td>丑</td><td>寅</td><td>卯</td></tr>
  <tr><td>辰</td><td>巳</td><td>午</td><td>未</td></tr>
  <tr><td>申</td><td>酉</td><td>戌</td><td>亥</td></tr>
</table>

備考

• 値を３つ以上指定すると、border-spacingは無効になります。

関連項目

• border：枠線に関するスタイルをまとめて指定する
• border-color：枠線の色を指定する
• border-radius：枠線の角の丸みを指定する
• border-style：枠線のスタイルを指定する
• border-width：枠線の太さを指定する
• border-collapse：セルの枠線の重なりを指定する

Tweet