fixedTblHdrLftCol is a jQuery plugin to modify a table element with a fixed header element and fixed left columns.
- jQuery v2.1.1+.
- The header/body must be wrapped around by a THEAD/TBODY element.
| Option 1 | Option 2 | Option 3 | Default value | Datatype | Remarks |
|---|---|---|---|---|---|
| scroll {} | height | null | String | Scroll area height |
|width | |null |String |Scroll area width
|headRow {}|className|'fTHLC-head-row' |String |Class name for position fixed TH elements
| |enabled |true |Boolean |Scroll event
| |overflow |'auto' |String |CSS overflow property
|leftCol {}|className|'fTHLC-left-col' |String |Class name for position fixed TD elements
| |enabled |true |Boolean |Scroll event
| |overflow |'auto' |String |CSS overflow property
| |fixedSpan|1 |Number |Number of left columns to be fixed
|syncWith | |null |String |jQuery Selector
wrapper {}|outer {} |idName |null |String |ID name for outer DIV element | |className|'fTHLC-outer-wrapper'|String |Class name for outer DIV element |inner {} |idName |null |String |ID name for inner DIV element | |className|'fTHLC-inner-wrapper'|String |Class name for inner div element corner {} |append | |true |Boolean |Clone top left corner |deepClone | |false |Boolean |Clone with events |outer {} |idName |null |String |ID name for outer DIV element | |className|'fTHLC-outer-corner' |String |Class name for outer DIV element |inner {} |idName |null |String |ID name for inner cloned TABLE element | |className|'fTHLC-inner-corner' |String |Class name for inner cloned TABLE element
When you set the corner.appended option to false and scrolled the table, the top left corner will be look like this.
If this option was true, the plugin will automaticaly clone the top left corner of the table and append it to most front. If it's event handlers were bounded before, please set corner.deepClone option to true.
If there were two or more tables which you want to syncronize the scroll events, set the jQuery selector to scroll.syncWith option.
Currently, this plugin does NOT support COLSPAN and ROWSPAN attributes.
This plugin is tested with following browsers:
- Apple Safari 7.0+
- Google Chrome 35.0+
- Mozilla Firefox 30.0+
All samples are written in HTML5/CSS3. The jQuery CDN and the YUI CSS Reset CDN are used.
Released under the MIT license.