CSSのborder-spacingでテーブルセル間のスペースを調整し、レイアウトを整える方法をわかりやすく解説

.css-sample-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 20px 0;
      text-align: center;
    }

    table {
      border-collapse: separate;
      width: 300px;
      margin: 0 auto;
    }

    td {
      border: 2px solid #99ccff;
      padding: 20px;
      text-align: center;
      border: 2px solid #111111;
    }
  

<div class="css-sample-container">
      <table class="css-sample-border-spacing-10">
        <tr>
          <td>セル1</td>
          <td>セル2</td>
        </tr>
        <tr>
          <td>セル3</td>
          <td>セル4</td>
        </tr>
      </table>
    </div>
  

.css-sample-border-spacing-10 {
      border-spacing: 10px;
    }
  

<div class="css-sample-container">
      <table class="css-sample-border-spacing-20">
        <tr>
          <td>セル1</td>
          <td>セル2</td>
        </tr>
        <tr>
          <td>セル3</td>
          <td>セル4</td>
        </tr>
      </table>
    </div>
  

.css-sample-border-spacing-20 {
      border-spacing: 20px;
    }
  

<div class="css-sample-container">
      <table class="css-sample-border-spacing-30">
        <tr>
          <td>セル1</td>
          <td>セル2</td>
        </tr>
        <tr>
          <td>セル3</td>
          <td>セル4</td>
        </tr>
      </table>
    </div>
  

.css-sample-border-spacing-30 {
      border-spacing: 30px;
    }