HTML CSS identical tables don't line up - html

Question

I have two tables that I want to line up, as simple demo I have made the following reproducible code which illustrates my problem
#index_table,
#index_table_header {
text-align: left;
margin: 20px;
margin: 0 auto;
}
#index_table,
#index_table_header {
width: 800px;
}
#index_table_header th {
padding: 10px 8px;
width: 100px;
border: 1px solid black;
}
#index_table td {
padding: 10px 8px;
width: 100px;
border: 1px solid black;
}
#index_table td:nth-child(1),
#index_table_header th:nth-child(1) {
width: 60px;
}
#index_table td:nth-child(3),
#index_table_header th:nth-child(3) {
width: 70px;
}
#index_table td:nth-child(5),
#index_table_header th:nth-child(5) {
width: 200px;
}
#index_table td:nth-child(2),
#index_table_header th:nth-child(2) {
width: 250px;
}
<table id="index_table_header">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Item</th>
<th scope="col">Amount</th>
<th scope="col">Added</th>
<th scope="col">Nutritional Value ID</th>
<th scope="col">Actions</th>
</tr>
</thead>
</table>
<table id="index_table">
<tbody>
<tr>
<td>395</td>
<td>chicken liver</td>
<td>0.37</td>
<td>2019-10-14</td>
<td>67</td>
<td>
Delete
<br>
Update
</td>
</tr>
</tbody>
</table>
The first table has a slightly smaller in width first th than the seconds tables td, then looking along the cells, they are all out of sync.

Answer 1

Add table-layout: fixed; to your table rules. This will force the table to ignore the cell contents and instead wrap text according to the specified widths.
table {
table-layout: fixed;
}
#index_table,
#index_table_header {
text-align: left;
margin: 20px;
margin: 0 auto;
}
#index_table,
#index_table_header {
width: 800px;
}
#index_table_header th {
padding: 10px 8px;
width: 100px;
border: 1px solid black;
}
#index_table td {
padding: 10px 8px;
width: 100px;
border: 1px solid black;
}
#index_table td:nth-child(1),
#index_table_header th:nth-child(1) {
width: 60px;
}
#index_table td:nth-child(3),
#index_table_header th:nth-child(3) {
width: 70px;
}
#index_table td:nth-child(5),
#index_table_header th:nth-child(5) {
width: 200px;
}
#index_table td:nth-child(2),
#index_table_header th:nth-child(2) {
width: 250px;
}
<table id="index_table_header">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Item</th>
<th scope="col">Amount</th>
<th scope="col">Added</th>
<th scope="col">Nutritional Value ID</th>
<th scope="col">Actions</th>
</tr>
</thead>
</table>
<table id="index_table">
<tbody>
<tr>
<td>395</td>
<td>chicken liver</td>
<td>0.37</td>
<td>2019-10-14</td>
<td>67</td>
<td>
Delete
<br>
Update
</td>
</tr>
</tbody>
</table>