In an attempt to align two tables, I created a simple demonstration with this reproducible code. The issue is that the first table's headers are slightly narrower than the second table's data cells, resulting in misalignment of the content.
#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>
<a href="/delete/395">Delete</a>
<br>
<a href="/update/395">Update</a>
</td>
</tr>
</tbody>
</table>