Freeze Table Headers & Columns With jQuery - fixedThead

fixedThead is a lightweight, performant jquery plugin which allows freezing table headers and even table columns in place on page scrolling.

More features:

• Allows to freeze multiple table columns/rows.
• Fully responsive. Auto adjusts the layout on window resize.
• Cross-browser and mobile friendly.

How to use it:

1. Load the main JavaScript file 'fixedThead.js' after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="fixedThead.js"></script>

2. Add the following CSS snippets to your webpage or existing CSS file.

.fixed-thead table {
  width: 100%;
  border-collapse: collapse;
}

.fixed-thead, .fixed-thead-head {
  position: relative;
  overflow: hidden;
}

.fixed-thead-side, .fixed-thead-corner {
  position: absolute;
  left: 0;
  overflow: hidden;
}

.fixed-thead-corner { top: 0; }

.fixed-thead-body { overflow: auto; }

3. Call the function on your html table and set the max height as this:

$('table.demo').fixedThead({
  height: 300
});

4. Set the padding & margin properties when freezing.

$('table.demo').fixedThead({
  height: 'auto',
  vspace: 0, // height: 'auto'
  top: 0, 
  bottom: 0
});

5. Set the number of columns and rows you want to freeze.

$('table.demo').fixedThead({
  row: 1, 
  col: 0
});

---

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