「CSS」テーブルの枠線の間隔を上下左右に指定する

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

書式
/* <length> */
border-spacing: 値;

<length> 値が1つ指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。

使用例

<style>
 /*上下左右を指定 border-spacing : 値*/
table {
  /*枠線の間隔を上下左右にセット*/
   border-spacing: 5px;
   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>