Thead和tbody之间的边界和边距

Question

我正在尝试使用CSS显示thead和tbody之间的边界以及一些边距。

    table thead  {
    	border: solid red 1px;
    	margin-bottom: 10px;
    }
    
    table tbody {
        border: solid green 1px;
    }

  <table>
    <thead>
      <tr>
        <th scope="col">Thumbnail</th>
        <th scope="col">Title</th>
        <th scope="col">Date Created</th>
        <th scope="col">View</th>
        <th scope="col">Edit</th>
        <th scope="col">Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>
        <td>Lorem ipsum</td>
        <td>Nov 3, 2017</td>
        <td>Icon-View</td>
        <td>Icon-Edit</td>
        <td>Icon-Delete</span></td>
      </tr>
    </tbody>
  </table>

上面的CSS已将边框和边距属性应用于广告，但边框却以某种方式崩溃，我尝试将border-collapse: separate设置为table，但没有用。

Answer 1

您可以使用outline: thin solid设置tbody和thead边框

thead {
  outline: thin solid red;
}

tbody {
  outline: thin solid green;
}

td{
  padding-top: 20px;
}

<table>
  <thead>
    <tr>
      <th scope="col">Thumbnail</th>
      <th scope="col">Title</th>
      <th scope="col">Date Created</th>
      <th scope="col">View</th>
      <th scope="col">Edit</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>
      <td>Lorem ipsum</td>
      <td>Nov 3, 2017</td>
      <td>Icon-View</td>
      <td>Icon-Edit</td>
      <td>Icon-Delete</td>
    </tr>
  </tbody>
</table>

另一种选择是添加一个空白行来模拟页边距

thead {
  outline: thin solid red;
}

tr{
  outline: thin solid green;
}

tr:first-child{
  outline: thin solid transparent;
  height: 10px;
}

<table>
  <thead>
    <tr>
      <th scope="col">Thumbnail</th>
      <th scope="col">Title</th>
      <th scope="col">Date Created</th>
      <th scope="col">View</th>
      <th scope="col">Edit</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
    <tr>
      <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>
      <td>Lorem ipsum</td>
      <td>Nov 3, 2017</td>
      <td>Icon-View</td>
      <td>Icon-Edit</td>
      <td>Icon-Delete</td>
    </tr>
  </tbody>
</table>