How can I align these two tables perfectly?
<html>
<head>
<style>
#index_table, #index_table_header{
text-align:left;
margin:20px;
margin: 0 auto;
table-layout: fixed;
}
#index_table, #index_table_header{
width:800px;
}
#index_table{
display: block;
height: 390px;
overflow-y: scroll;
}
#index_table_header td{
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 td:nth-child(1){
width: 80px;
}
#index_table td:nth-child(3), #index_table_header td:nth-child(3){
width: 70px;
}
#index_table td:nth-child(5), #index_table_header td:nth-child(5){
width: 200px;
}
#index_table td:nth-child(2), #index_table_header td:nth-child(2) {
width: 250px;
}
</style>
</head>
<body>
<table id="index_table_header">
<thead>
<tr>
<td>ID</th>
<td>Item</td>
<td>Amount</td>
<td>Added</td>
<td>Nutritional Value ID</td>
<td>Actions</td>
</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>
</body>
</table>
</html>
a few things to think about
- I need the tables and table cells (columns) to be perfectly aligned
- The second table has numerous rows and I want it to be scrollable without the header disappearing from view, which is why I kept them separate.