Apply border-spacing to table body rows only

Question

I have a table with 2 header rows and multiple body rows. I want the spacing between rows in the body to be 10 pixels. I achieve this with:

border-collapse: separate;
border-spacing: 10px;

However, this also obviously applies to the rows in the header. But for the header, I want there to be no space between the rows. My HTML is:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
  border-spacing: 10px;
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

The fiddle is here. I want there to be no space between the bottom of the first header row and top of second header row. I've tried applying border-spacing just to the body but it only works at table level. Any ideas?

Answer 1

The border-spacing is applied to table elements and can not be targeted for tbody alone but you can try the below CSS hack and apply border: white to the td element to create a margin effect.

Additional Code:

table td {
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}

Output:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>