Fix Table Header And Column In Pure JavaScript – fixed-table

Preview:

Description:

fixed-table is a small and very easy-to-use JavaScript plugin that makes the header and first column of your HTML table sticky on horizontal and vertical scroll.

How to use it:

Include the stylesheet fixed-table.css in the header, and the JavaScript file fixed-table.js at the end of the html page.

<link rel="stylesheet" href="fixed-table.css">
<script src="fixed-table.js"></script>

Wrap your html table into a DIV container with the CSS class of ‘fixed-table-container’.

<div id="fixed-table-container-demo" class="fixed-table-container">
  <table>
    <thead>
      <tr><th>Name</th><th>Status</th><th>Description</th></tr>
    </thead>
    <tbody>
      <tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem</td></tr>
      <tr><td>Lorem ipsum dolor sit amet</td><td>Lorem</td><td>Dolor</td></tr>
      <tr><td>Lorem ipsum dolor</td><td>sit</td><td>Lorem ipsum dolor sit amet ipsum dolor sit amet</td></tr>
      <tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem ipsum dolor sit amet</td></tr>
      <tr><td>Dolor sit amet</td><td>Dolor sit amet</td><td>Lorem</td></tr>
      <tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor sit amet ipsum dolor sit amet</td><td>Sit amet</td></tr>
      <tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem</td></tr>
      <tr><td>Lorem ipsum dolor sit amet</td><td>Lorem</td><td>Dolor</td></tr>
      <tr><td>Lorem ipsum dolor</td><td>sit</td><td>Lorem ipsum dolor sit amet</td></tr>
      <tr><td>Lorem</td><td>Lorem ipsum</td><td>Lorem dolor sit amet</td></tr>
      <tr><td>Dolor sit amet</td><td>Dolor sit amet</td><td>Lorem</td></tr>
      <tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor sit</td><td>Sit amet lorem</td></tr>
    </tbody>
  </table>
</div>

Initialize the library and we’re done.

var fixedTable = fixTable(document.getElementById('fixed-table-container-demo'));