Below css class (table-sticky-row)
position sticky (position: sticky) not working in IE11 and Edge.
The sticky doesn't work on IE11/edge, but luckily, in this case, we can use position : fixed, which will work on both older and newer browsers i.e.
As an Example,
CSS Code looks like-
</style>
And HTML code looks like,
</table>
.table-sticky-row
{
position:
sticky;
bottom:
0;
right:
0;
background:
rgba(0, 211, 211, 1.6);
}The sticky doesn't work on IE11/edge, but luckily, in this case, we can use position : fixed, which will work on both older and newer browsers i.e.
table.header-sticky-scroll > tbody
{
display:
block;
height:
150px;
overflow:
auto;
}
table.header-sticky-scroll thead,
tbody tr {
display:
table;
width:
100%;
table-layout:
fixed;
}
table.header-sticky-scroll thead
{
width:
calc( 100% - 1em )
}As an Example,
CSS Code looks like-
<style>
table.header-sticky-scroll > tbody
{
display:
block;
height:
150px;
overflow:
auto;
}
table.header-sticky-scroll thead,
tbody tr {
display:
table;
width:
100%;
table-layout:
fixed;
}
table.header-sticky-scroll thead
{
width:
calc( 100% - 1em )
}
</style>
And HTML code looks like,
<table class="table
table-bordered header-sticky-scroll">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">#</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Anil</td>
<td>Singh</td>
<td>30</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Aradhya</td>
<td>Singh</td>
<td>6</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Reena</td>
<td>Singh</td>
<td>28</td>
</tr>
</tbody>
</table>