第一个表是固定的，当第二个表向下滚动时，它会保留在视图中。如何使这两个表对齐？
<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>
需要考虑的几件事
第一个表是固定的，当第二个表向下滚动时，它会保留在视图中。如何使这两个表对齐？
当将display: block;规则添加到最后一个表时，它停止了与第一个表相同的行为。