「CSS」テーブルの枠線の間隔(border-spacing)を左右と上下に指定

2014年6月20日2021年10月4日

書式
/* 左右の <length> | 上下の <length> */
border-spacing: 値 値;

<length> 値が2つ指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う列の間隔) を定義し、2番目の値がセル間の上下方向の間隔
(つまり、隣り合う行の間隔) を定義します。
使用例

<style>
 /*左右と上下を指定 border-spacing : 値　値*/
table {
  /*枠線の間隔を左右と上下にセット*/
   border-spacing: 1em .5em;
   padding: 0 2em 1em 0;
   border: 1px solid skyblue;
 }
 td {
   width: 1.5em;
   height: 1.5em;
   background: #d2d2d2;
   text-align: center;
   vertical-align: middle;
}
</style>

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>