Solution for fixing header of normal table.

This works with normal custom tables and bootstrap tables.

Table preparation

Create a table with html 5 standard

Create a div inside a main div. for that div you can give width and height and scolling. Give an id for this divission

<pre>
    <div class="main_div" id="selector">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</pre>

Install or link header-fix-on-table js to the html file

npm install header-fix-on-table

Now use the following method to make your table header sticky

fixIt.init({
    selector: "main_divission_id",
    stickyHeaderClass: "custom css class for sticky header"
});

By default plugin will target for one table using id, For multiple tables use class instead

Use option

changeIdAsClass: true  

Now selector is considered as class. So you need to pass the class name instead of id in selector.

Thats it your sticky table is ready to go

It is tested with chrome and IE.

Please share and help others on easy fix for table header fixing.