如何让这两个表对齐？
<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>
一些需要考虑的事情
- 我需要表格和表格单元格(列)完全对齐
- 第二个表格实际上有数百行，我希望它可以滚动并且我不希望标题从 View 中消失，这就是为什么我有两个表格并且我不想合并为一个表格的原因。
最佳答案
我相信您的第一个表实际上是第二个表的标题。如果是这样，你可以这样做。您可以通过和区分 header 和数据
#index_table {
text-align: left;
margin: 20px;
margin: 0 auto;
}
#index_table {
width: 800px;
}
#index_table thead {
display: block;
}
#index_table tbody {
display: block;
height: 390px;
overflow-y: scroll;
}
#index_table th {
padding: 10px 8px;
border: 1px solid black;
background-color: gray;
}
#index_table td {
padding: 10px 8px;
border: 1px solid black;
}
#index_table td:nth-child(1),th:nth-child(1) {
width: 80px;
}
#index_table td:nth-child(2),th:nth-child(2) {
width: 70px;
}
#index_table td:nth-child(3),th:nth-child(3) {
width: 200px;
}
#index_table td:nth-child(4),th:nth-child(4) {
width: 250px;
}
#index_table td:nth-child(5),th:nth-child(5) {
width: 250px;
}<html>
<body style="height: 100px">
<table id="index_table">
<thead>
<tr>
<th>ID</th>
<th>Item</th>
<th>Amount</th>
<th>Added</th>
<th>Nutritional Value ID</th>
<th>Actions</th>
</tr>
</thead>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</body>
</html>关于html css 表格不会排队，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58445793/