Spacing between tbodys

Question

I have an item listing table with groups of lines (tbody) and would like to add spacing between them, not that I haven’t already done, but I’ve been looking for a "less gambiarra" way to achieve the feat.

I would also like to style the edges of the table better while I get the spacing. Here’s an example from the table:

Example

table { text-align:left; border-collapse:separate; border-spacing:0; }

table tbody { border-spacing:0 10px; } /* apenas ilustrativo */

table tbody td { vertical-align:middle; border-top:1px solid #000; }
table tbody:nth-child(odd) { background-color:#ccc; }

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>th1</th>
      <th>th2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">1</td>
      <td>Teste</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td colspan="2">Algum conteúdo</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">2</td>
      <td>Teste</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td colspan="2">Algum conteúdo</td>
    </tr>
  </tbody>
</table>

---

For those who have never seen a table with multiple <tbody>, there goes a good request: https://www.w3.org/WAI/tutorials/tables/irregular/

Answer 1

Set a width for the table a float:left and a margin-bottom for tbody.

Answer 2

Spacing

To give the mirroring just assign the padding serves to give an internal mirroring

table tbody { padding: 10px; }

Border style

table { 
    border-radius: 4px;
    box-shadow: 0 0 15px #CCC;
    border: 1px solid #777;
    transition: 0.3s;
}

table:hover { 
    box-shadow: 0 0 15px #999;
}