Skip to content

Latest commit

 

History

History
61 lines (49 loc) · 2.68 KB

README.md

File metadata and controls

61 lines (49 loc) · 2.68 KB
Raw

jQuery-FixTableHeader

A jQuery plugin to fix header or footer row in a table on user scroll

This plugin does exactly what it says. Fixing the headings and/or the footers in a HTML table is made easy by this plugin

Version 1.0 | Invoking the plugin | Options | Important

View a demo here.

NPM

npm i fix-table-header

Version 1.0

jQuery.fixTableHeader.js

  • fix header and/or footer with options
  • no alterations to existing table needed, just wrap it around a container and call this plugin.
  • no dynamic element created for fixing header and footer, this just uses the existing elements (th and td)
  • perfect table layout not needed, just works with few tr in iside a table.
  • Supports fixing multiple rows in header/footer by using the thead/tfoot tag. Any number of rows within these tags will be fixed
  • Tables with horizonal scrolling(responsiveness) is supported
  • Super light: just a 2kb plugin

Patch v1.0.3

  • adds classes to header and footer cells, fth-header and fth-footer respectively for optional CSS styling.
  • fixed the position of footer when the container has a horizontal scrollbar

Invoking the plugin

The table should be wrapped inside a container div with overflow:auto and a fixed height if necessary.
Eg table:

<div id="tbMarksContainer" style="height:400px;overflow:auto;">
    <table id="tbMarks">
        ...
    </table>
</div>
  • invoke using the container div's ID - $('#tbMarksContainer').fixTableHeader();

Options

  • fixHeader : true/false (default -> true) [fix or not to fix the header]
  • fixFooter : true/false (default -> false) [fix or not to fix the footer]

Examples:
$('#tbMarksContainer').fixTableHeader({fixHeader:true,fixFooter:true}); $('#tbMarksContainer').fixTableHeader({fixHeader:false,fixFooter:true});

The plugin adds the classes fth-header and fth-footer to the ths and tds to all the detected headers and footers respectively. You can use this classes to manipulate thier appearance in your CSS.

Example:

td.fth-header,th.fth_eader,td.fth-footer{
      border-top:none;
      border-bottom:none;
   }

! Important

  • A drawback: borders applied to the headers and footers wont be preserved while scrolling (researching, if this can be fixed).
  • It is recommended to avoid border-top and border-bottom on the th or td which is going to be the header or the footer.
  • It is important to keep a solid color or an image as background to the headers and footers to avoid any transparency while scrolling.