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 将边框和边距属性应用于thead，但不知何故边框正在折叠，我尝试将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>