ie11 sticky polyfill

Position Sticky Not Working in IE11 and edge

Below css class (table-sticky-row) position sticky (position: sticky) not working in IE11 and Edge.
.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

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

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^