Freeze Multiple Headers And Columns In Table - jQuery MultiFreezer

MultiFreezer is an easy-to-use jQuery sticky table plugin which keeps multiple header rows and table columns while scrolling through the html table.

How to use it:

1. Include the jQuery MultiFreezer plugin's stylesheet multifreezer.css and JavaScript file multifreezer.js on the web page.

<link href="/path/to/multifreezer.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/multifreezer.js"></script>

2. Initialize the plugin using HTML data attributes:

• data-scroll-height: scroller height, if null, common wrapper height() will be used
• data-cols-number: number of columns to freeze, if null, will be autodetected from <TH>

<table class="table-freeze-multi" 
       data-scroll-height="300"
       data-cols-number="2">

  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      ...
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    ...
  </tbody>

</table>

---

This awesome jQuery plugin is developed by janrenn. For more Advanced Usages, please check the demo page or visit the official website.