html - 用 box-shadow 分隔

Question

如何将带有box-shadow的tbody与另一个tbody分开？

像一个

tbody {
    margin-bottom: 16px
}

但是，我不想在tbody上使用display: block。

JSFIDDLE：

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

IMG 我想要什么：

标签： htmlcsscss-tables

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>