Отдельно <tbody>с box-shadow

Question

Как отделить тело с box-shadow от другого тело ?

Как

tbody {
    margin-bottom: 16px
}

Но я не хочу использовать display: block on tbody .

JSFIDDLE:

http://jsfiddle.net/kw9odqjr/1/

IMG, что я хочу:

Answer 1

Вместо повторения tbody много раз вы можете использовать следующую структуру:

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}

tbody table {
  box-shadow: 0 0 0 1px black;
  border-radius: 8px;
}

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <table>
            <tr>
              <td>Jill</td>
              <td>Smith</td>
            </tr>
            <tr>
              <td>Eve</td>
              <td>Jackson</td>
            </tr>
        </table>
      </td>
    </tr>
    <tr><td colspan="2" height="20"></td></tr>
    <tr>
      <td colspan="2">
        <table>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr><td colspan="2" height="20"></td></tr>
    <tr>
      <td colspan="2">
        <table>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr><td colspan="2" height="20"></td></tr>
  </tbody>  
</table>

Answer 2

Нельзя назначать margin для tbody, вы можете вставить разделитель, как этот

<tbody style="box-shadow:none; height:20px;">
    <tr></tr>
</tbody>