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>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|