Расхождение между таблицей и шириной div

Question

Я пытаюсь сделать ту же ширину, что и вложенные div.Поэтому в основном я хочу, чтобы ширина столбцов была такой же, как у div, когда таблица и родительский div имеют одинаковый размер.

Мне удалось сделать их почти одинаковыми, но все еще естьнекоторые отступы в ячейках таблицы, которые я не могу понять.

Ссылка Codesandbox: https://codesandbox.io/s/wyzz001kyk

html:

<div class='header'>
  <div class='one'>One</div>
  <div class='two'>Two</div>
</div>
<table class='table'>
  <th class='one'>One</th>
   <th class='two'>Two</th>
</table>

css:

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  font-weight: 500;
}

.one {
  width: 60%;
}

.two {
  width: 40%;
}

Answer 1

Явно удалите отступы из элементов th и td:

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  font-weight: 500;
}
.one {
  width: 60%;
}
.two {
  width: 40%;
}
/* this */
.table th,
.table td {
  padding: 0;
}

<div class='header'>
  <div class='one'>One</div>
  <div class='two'>Two</div>
</div>
<table class='table'>
  <th class='one'>One</th>
  <th class='two'>Two</th>
</table>