tbody 边框不与表头齐平

Question

我无法使 tbody 边框不超过整个宽度。有没有办法解决它？谢谢

PS：还有其他问题，例如空的“.cell” div 大小不正确，但是我不确定您是否可以发布多问题问题。所以让我们专注于上面的问题。

table { 
  box-sizing: border-box;
  border-collapse: collapse;
  margin-bottom: 2000px;
}

th {
  background-color: white;
  position: sticky;
  top: 0;
  padding: 0;
  border: 0;
}

.cell {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  width: 100%;
  padding: 15px;
  background-color: red;
}

th:first-of-type > .cell {
  border-radius: 5px 0 0 0;
}

th:last-of-type > .cell {
  border-radius: 0 5px 0 0;
}

td {
  border: 1px solid blue;
  background-color: #fff;
  padding: 15px;
}

tbody {
  border: 2px solid green;
  box-sizing: border-box;
}

<table>
<thead>
  <tr>
    <th><div class="cell"></div></th>
    <th><div class="cell">aaaaaa</div></th>
    <th><div class="cell">aaaa</div></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>aaa</td>
    <td>aaaaaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaaaaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaaaaa</td>
    <td>aaaa</td>
  </tr>
</tbody>
</table>

Answer 1

我假设圆角是您将<div> 放在<th> 中的原因。如果你想要圆角，那么你需要使用以下样式：

table { border-collapse:separate; border-spacing:0; border: 0; }

该演示有一些可以调整的额外更改。

演示

table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2000px;
  border: 0;
}

thead {
  position: sticky;
  top: 0;  
}

th {
  border: 1px solid red;
  background-color: red;
  padding:15px;
}

th:first-of-type {
  border-top-left-radius: 6px;
}

th:last-of-type {
  border-top-right-radius: 6px;
}

td {
  border: 1px solid blue;
  background-color: #fff;
  padding: 15px;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>aaaaaa</th>
      <th>aaaa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaa</td>
      <td>aaaaaa</td>
      <td>aaaa</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>aaaaaa</td>
      <td>aaaa</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>aaaaaa</td>
      <td>aaaa</td>
    </tr>
  </tbody>
</table>