How to make the last row of a table frozen? - html

Question

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> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </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?

Answer 1

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> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>

Answer 2

you can try this one.
worked for me:
table{
width: 400px;
position: relative;
background: transparent;
display: block;
padding-bottom: 42px;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table ::-webkit-scrollbar {
width: 0px;
}
table > thead {
height: 30px;
text-align: end;
position: sticky;
top: 0;
display: table;
width: 100%;
background: green;
}
table > thead > tr{
height: 30px;
background-color: #009879;
color: #ffffff;
text-align: left;
}
table > thead > tr > th{
text-align: end;
}
table > tbody{
height: 200px;
display: block;
width: 100%;
overflow: auto;
background: pink;
}
table > tbody > tr{
height: 30px;
text-align: end;
display: table;
width: 100%;
}
table > thead > tr > th,
table > tbody > tr > td{
padding: 12px 15px;
}
table > tbody > tr{
border-bottom: 1px solid #dddddd;
}
table > tbody > tr:nth-of-type(even) {
background-color: #f3f3f3;
}
table > tbody > tr:last-of-type {
border-bottom: 2px solid #009879;
}
table > tbody > tr:last-child{
position: absolute;
bottom: 0;
}
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
<tr>
<td>text2.1</td>
<td>text2.2</td>
<td>text2.3</td>
</tr>
<tr>
<td>text3.1</td>
<td>text3.2</td>
<td>text3.3</td>
</tr>
<tr>
<td>text4.1</td>
<td>text4.2</td>
<td>text4.3</td>
</tr>
<tr>
<td>text5.1</td>
<td>text5.2</td>
<td>text5.3</td>
</tr>
<tr>
<td>text6.1</td>
<td>text6.2</td>
<td>text6.3</td>
</tr>
<tr>
<td>text7.1</td>
<td>text7.2</td>
<td>text7.3</td>
</tr>
<tr>
<td>text8.1</td>
<td>text8.2</td>
<td>text8.3</td>
</tr>
<tr>
<td>text9 .1</td>
<td>text9 .2</td>
<td>text9 .3</td>
</tr>
</tbody>
</table>