如何冻结表格的最后一行？

Question

我可以冻结HTML表格的第一行，类似于MS Word中的冻结窗格，但不确定如何对表格中的最后一行执行此操作。

我有这样的代码：

​

.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>

​