html - 如何卡住表格的最后一行？

Question

我能够像 MS Word 中的卡住 Pane 一样卡住 HTML 表格的第一行，但不确定如何对表格中的最后一行执行此操作。

我有这个代码:

.myTable {
  overflow-y: scroll;
  height: 650px;
  display: block;
}

.table-header-col {
  position: sticky;
  top: 0px;
  background-color: #f5f6f8;
}

<table class="myTable">
  <thead>
    <tr style="height: 55px; margin: 0px;">
      <th class="table-header-col"></th>
      <th class="table-header-col">Description </th>
      <th class="table-header-col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>Bananas</td>
      <td>2.00</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Apples</td>
      <td>3.00</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
    </tr>
  </tbody>
</table>

我在这里仅包含两行作为示例，但如果我有 50 行，用户将必须滚动才能到达包含总计的最后一行。是否可以像我上面卡住标题行的方式那样卡住该行？

Answer 1

你想要这样的东西吗:)

.myTable {
   overflow-y: scroll;
   height: 650px;
   display: block;
}
table tbody tr:last-child{
   position: sticky;
   top: 0;
   background-color: #f5f6f8;
}

<table class="myTable">
  <thead>
    <tr style="height: 55px; margin: 0px;">
      <th class="table-header-col"></th>
      <th class="table-header-col">Description </th>
      <th class="table-header-col">Amount</th>
    </tr>
 </thead>
 <tbody>
    <tr>
       <td>&nbsp;</td>
       <td>Bananas</td>
       <td>2.00</td>      
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>Apples</td>
      <td>3.00</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
     <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
     <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
     <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>&nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
  </tbody>
</table>