html CSS 表格 从表格中间滚动

Question

我的HTML表中有20列。我的桌子上将有数百条记录。我一直保持水平滚动，但我的问题是当我查看表格中间部分的记录并且我想水平滚动时，我想转到表格底部。

我需要一个从表格中间滚动的选项

<div style="width: 1100px;overflow-x: auto;">
<table >
<thead>
<td>Col-1</td>......<th>col-20</th>
</thead>
<tbody>
<?php echo "dynamic Records"; ?>
</tbody>
</table>
</div>

Answer 1

您需要在<div>内查看表格，此<div>将是视口，这样您可以查看任何大小的表格，并且可以垂直和水平滚动以访问完整的表格。 试试这段代码，它应该按预期工作。

.parent {
/* width: 500px; */
height: 150px;
overflow: auto;
}
.child {
width: 1100px;
border: 1px;
}

<div class="parent">
<table class='child'>
<thead>
<td>Col-1</td>
<th>col-20</th>
</thead>
<tbody>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<?php echo "dynamic Records"; ?>
</tbody>
</table>
</div>