html - Thead和tbody之间的边界和边距

我正在尝试使用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和margin属性，但是边框以某种方式崩溃了，我已经尝试了border-collapse: separate到table，但是没有用。

最佳答案

您可以使用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>

关于html - Thead和tbody之间的边界和边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53365302/