正文边框未与表标题齐平

Question

我在使躯干边框不延伸到广告宽度上时遇到麻烦。有办法解决吗？谢谢

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>