在html表中将第5行的滚动条向上滚动

Question

向前有一个滚动条，而不是一个正常的滚动条外，但到目前为止，我没有任何运气，有什么办法我可以做到这一点？

由于大量的行，表列表出界了，有没有办法在第5行之后切到导航的第二页或无限滚动条？

下面是表格html的代码

<div class="col-md-10">    
    <div class="table-responsive">
        <table id="customer-list" class="table">
            <!-- Loading Spinner Div -->
            <div id="loading-container">
                <p>Fetching all customer data...</p>
                <div id="loading-spinner"></div>
            </div>
            <tbody>
                                            
            </tbody>
        </table>
    </div>

我尝试过使用datatable插件，但也有一些不太好的地方

Answer 1

我想通过你的问题我明白你想冻结几行。您可以通过将几行放入不同的tbody中来冻结它们，并将位置：sticky与顶部：0一起分配。

有关，请参见html和css。在下面的代码段中冻结我类：

* {
  margin: 0;
  padding: 0;
}
table {
  width: 100%;
  max-height: 200px;
  overflow: auto;
}
tbody{
  width: 100%;
  }
table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
  text-align: left;
}
table, tbody, tr, th, td{
  background: white;
}

tbody.freeze-me{
  top: 0;
  position: sticky;
}

html lang-html prettyprint-override"><table cellpadding="0" cellspacing="0">
  <tbody class="freeze-me">
    <tr><th>ID</th><th>Name</th><th>Action</th></tr>
    <tr><td>1</td><td>Freeze</td><td>-</td></tr>
    <tr><td>2</td><td>till</td><td>-</td></tr>
    <tr><td>3</td><td>here</td><td>-</td></tr>
  </tbody>
  <tbody>
    <tr><td>4</td><td>scrollable</td><td>-</td></tr>
    <tr><td>5</td><td>scrollable</td><td>-</td></tr>
    <tr><td>6</td><td>scrollable</td><td>-</td></tr>
    <tr><td>7</td><td>scrollable</td><td>-</td></tr>
    <tr><td>8</td><td>scrollable</td><td>-</td></tr>
    <tr><td>9</td><td>scrollable</td><td>-</td></tr>
    <tr><td>10</td><td>scrollable</td><td>-</td></tr>
    <tr><td>11</td><td>scrollable</td><td>-</td></tr>
    <tr><td>12</td><td>scrollable</td><td>-</td></tr>
    <tr><td>13</td><td>scrollable</td><td>-</td></tr>
    <tr><td>14</td><td>scrollable</td><td>-</td></tr>
    <tr><td>15</td><td>scrollable</td><td>-</td></tr>
  </tbody>
</table>