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>