How to make the last row of a table frozen?

Issue

I'm able to make the first row of an HTML table frozen similar to Freeze Panes in MS Word, but not sure how to do it for the last row in the table.

I have this code:

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

I only included two rows here for an example, but if I have 50 rows, the user will have to scroll to get to the last row which contains a total. Is it possible to make that row Freeze similar to the way I'm making the header row freeze above?

Solution

are you want something like this :)

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

Answered By - Rayees AC