Fixed Table Header To The Top Of Page On Scroll in Pure Javascript

Fixed table clean js is a vanilla javascript solution that sticks the table header to the top of the page when hovering it.

html table with fixed header and scrollable body, table thead fixed tbody scroll css, table header fixed on scroll, html table with fixed header and scrollable body javascript

How to make use of it:

1. Install and import the library with NPM.

# NPM
$ npm i @shkrabovleonid/fixed-table-clean-js --save
import fixedTable from 'fixed-table-clean-js';

2. Attach a static table to your HTML table. Note that the table must contain an <thead> element as follows:

<table id="fixedTable">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
try{
  new fixedTable({tableSelector: "#fixedTable"});
}catch (e){
  console.error(e);
}

Fix Table Header To The Top Of Page On Scroll, fixed table clean js Plugin/Github, scrollable table with fixed header and left column using css


See Demo And Download

Official Website(ShkrabovLeonid): Click Here

This superior jQuery/javascript plugin is developed by ShkrabovLeonid. For extra Advanced usage, please go to the official website.

Share