Граница тела не является гриппом sh с заголовком таблицы

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>