与盒影分开

Question

如何将具有 box-shadow 的 body 与另一个 body 分开？

像

tbody {
    margin-bottom: 16px
}

但是，我不想在 body 上使用 display：block 。

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>