PHPackages                             intelogie/float-thead - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. intelogie/float-thead

ActiveLibrary

intelogie/float-thead
=====================

table fixed header

0168JavaScript

Since Oct 8Pushed 10y ago1 watchersCompare

[ Source](https://github.com/INTELOGIE/float-thead)[ Packagist](https://packagist.org/packages/intelogie/float-thead)[ RSS](/packages/intelogie-float-thead/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

jquery.floatThead v1.3.1
========================

[](#jqueryfloatthead-v131)

[![This is for the really lazy cats](https://camo.githubusercontent.com/468b8497442fdf32ede3dc490203fbbba53f1d567498e79e28c6663ee8dbc477/687474703a2f2f6769616e742e6766796361742e636f6d2f416e79476c6f72696f7573416c706163612e676966)](https://camo.githubusercontent.com/468b8497442fdf32ede3dc490203fbbba53f1d567498e79e28c6663ee8dbc477/687474703a2f2f6769616e742e6766796361742e636f6d2f416e79476c6f72696f7573416c706163612e676966)

Float the table header without special css. This plugin assumes nothing about your table markup and "just works" without losing your events or styles. Supports floating the header while scrolling within the window or while scrolling within a container with overflow. Plays nice with AngularJS and datatables and well written plugins.

😻**My cat loves it**😻

Check out the demo / docs page for copious examples:

\###[Demos and Docs](http://mkoryak.github.io/floatThead/)

\###[Download](https://github.com/mkoryak/floatThead#download--install)

```
bower install floatThead
```

Features:
---------

[](#features)

- Floats the table header - it remains in viewport as you scroll
- Works on tables within a scrollable container or whole window scrolling
- Horizontal or vertical scrolling
- Doesn't clone the thead - so your events stay bound
- Doesn't mess with your styles
- Works on any table
- Requires no special css
- Works with libs like [datatables](http://datatables.net), [perfect-scrollbar](http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/), [bootstrap](http://mkoryak.github.io/floatThead/examples/bootstrap3/), and many more
- Screen reader support
- Plays nicely with angularjs

What it does not do:
--------------------

[](#what-it-does-not-do)

- Does not float the footer
- Does not let you lock the first column like in excel
- **Safari and mobile safari are not supported**. It might work, or it [might not](https://github.com/mkoryak/floatThead/issues/108), depending on your markup and safari version.

Common Pitfalls
---------------

[](#common-pitfalls)

If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better [read this](http://mkoryak.github.io/floatThead/faq/).

How to get help with the floatThead
-----------------------------------

[](#how-to-get-help-with-the-floatthead)

All issues should be reported through github. If you don't have an account you can make one.
Providing the following will greatly increase the chances of your issue being resolved quickly:

- Include the browser and operating system where you are having the problem. If its IE, a screenshot is also nice since I don't have quick access to that abomination.
- **Provide a jsfiddle that reproduces your issue in its simplest form possible**. If its hard to read your code, you did it wrong.
- A description of the issue and steps to reproduce

I will do my best to help you in a timely manner.

Download / Install:
-------------------

[](#download--install)

#### Download

[](#download)

[Latest Release](https://github.com/mkoryak/floatThead/archive/v1.3.1.zip)

Inside of that zip the following javascript files are of interest to you:

- `/dist/jquery.floatThead.js` = development version
- `/dist/jquery.floatThead.min.js` = production version

if your project includes [underscore](http://underscorejs.org) and you want to save a few bytes you can use the slim version:

- `/dist/jquery.floatThead-slim.js`
- `/dist/jquery.floatThead-slim.min.js`

#### CDN Hosted

[](#cdn-hosted)

**cdnjs**:
**jsdelivr**:

#### Via Bower

[](#via-bower)

Install using [Bower](http://bower.io/):

```
bower install floatThead
```

#### Via NPM

[](#via-npm)

```
npm install floatthead
```

[![npm](https://camo.githubusercontent.com/c649bd4a25100eb35db28995b7e5c261dc34180b53af0af5f127c6a117591b35/68747470733a2f2f6e6f6465692e636f2f6e706d2f666c6f617474686561642e706e67)](https://camo.githubusercontent.com/c649bd4a25100eb35db28995b7e5c261dc34180b53af0af5f127c6a117591b35/68747470733a2f2f6e6f6465692e636f2f6e706d2f666c6f617474686561642e706e67)

### Webjar for Maven, Gradle, SBT

[](#webjar-for-maven-gradle-sbt)

Requirements:
-------------

[](#requirements)

- jQuery 1.8.x or better (1.9 compliant) (or jQuery 1.7.x and jQuery UI core)

Supported Browsers:
-------------------

[](#supported-browsers)

- IE8 or better (read [this](http://mkoryak.github.io/floatThead/examples/row-groups/))
- Modern browsers

Demo & Docs:
----------------

[](#demo--docs)

[DEMOS and Documentation](http://mkoryak.github.io/floatThead/)

Using with AngularJS
--------------------

[](#using-with-angularjs)

I haven't written an official directive, but others have written wrappers:

Using with IE9
--------------

[](#using-with-ie9)

FloatThead will not work properly in IE9 unless you have the following meta tag in the head of the page:

```

```

With very big tables, you may also run into this exciting bug:
Watch for it.

Change Log
----------

[](#change-log)

### 1.3.1

[](#131)

- allow 'useAbsolutePositioning', 'scrollingTop' and 'scrollingBottom' to be used, but yell about it via console.error

### 1.3.0

[](#130)

- **Breaking**: renamed 'useAbsolutePositioning' option to `position`. value mappings (old -> new) are: \[true -> 'absolute', false -> 'fixed', null -> 'auto'\]
- **Breaking**: renamed 'scrollingTop' to `top` and 'scrollingBottom' to `bottom`
- **Breaking**: removed cellTag and debounceResizeMs options
- **Breaking**: removed `floatThead-floatContainer` class from the $floatContainer because `floatThead-container` class is already there and it is configurable via `floatContainerClass` option.
- added `autoReflow` option
- [mkoryak#235](https://github.com/mkoryak/floatThead/pull/235) - fix tabindex of the floated header (thanks [robinpoort](https://github.com/robinpoort))
- [mkoryak#242](https://github.com/mkoryak/floatThead/issues/242) - support for multiple tables within a single scrolling div
- [mkoryak#246](https://github.com/mkoryak/floatThead/issues/246) - enableAria:true causes javascript exception when using Colgroup
- fixed `getRowGroups`, method which was busted when the header was floated
- make grunt work in node 0.12

### 1.2.13

[](#1213)

- [mkoryak#220](https://github.com/mkoryak/floatThead/issues/220) - Header and Body alignment problem
- package.json was incorrect
- `autoReflow` option should work better if your browser supports MutationObserver
- added native support for tables within bootstrap3 tabs or jqueryui tabs
- if a tables is hidden, the plugin will not try do anything when you scroll
- the cat is cute

### 1.2.12

[](#1212)

Huge thanks to [CoryDuncan](https://github.com/CoryDuncan), [ithielnor](https://github.com/ithielnor), [jurko-gospodnetic](https://github.com/jurko-gospodnetic) and [mhwlng](https://github.com/mhwlng) for your PRs

- [mkoryak#168](https://github.com/mkoryak/floatThead/pull/168) - support for fractional column widths (no more alignment issues!)
- [mkoryak#175](https://github.com/mkoryak/floatThead/pull/175) - having tables within tables wont cause weird issues
- [mkoryak#165](https://github.com/mkoryak/floatThead/issues/165) - Fire an event when the header is floated / unfloated
- [mkoryak#180](https://github.com/mkoryak/floatThead/issues/180) - no space outside of table causes it to always float
- [mkoryak#185](https://github.com/mkoryak/floatThead/pull/185) - inner scrolling doesnt respect container border
- [mkoryak#186](https://github.com/mkoryak/floatThead/issues/186) - can init on a table without thead and later add it
- [mkoryak#194](https://github.com/mkoryak/floatThead/issues/194) - header sizing takes into account border-collapse rules
- bunch of code and stylistic cleanup

### 1.2.11

[](#1211)

- now supports perfect-scrollbar plugin
- slightly better mobile safari support
- fix bower.json

### 1.2.10

[](#1210)

- play nicely with angularjs if it modifies the DOM behind the scenes
- screen reader support via `enableAria` option
- [mkoryak#122](https://github.com/mkoryak/floatThead/issues/122) - better default options for ie
- [mkoryak#121](https://github.com/mkoryak/floatThead/issues/121) - header layout bug
- [mkoryak#128](https://github.com/mkoryak/floatThead/pull/128) - issues with scrollbar size detection in certain layouts
- [mkoryak#127](https://github.com/mkoryak/floatThead/issues/127) - destroy not removing some elements

### 1.2.9

[](#129)

- **Deprecated the `cellTag` option**, use `headerCellSelector` instead (see docs)
- [mkoryak#101](https://github.com/mkoryak/floatThead/issues/101) - **huge** performance improvement
- [mkoryak#98](https://github.com/mkoryak/floatThead/issues/98) - Border-collapse ignored on scroll
- [mkoryak#99](https://github.com/mkoryak/floatThead/issues/99) - Incorrect scroll width calculation in some cases
- A couple of updates to the `destroy` method that get the table back into a more pristine state

### 1.2.8

[](#128)

- [mkoryak#82](https://github.com/mkoryak/floatThead/pull/82) - table not disappearing when out of view in a certain layout
- [mkoryak#84](https://github.com/mkoryak/floatThead/issues/84) - header not aligned if your scrolling container has a certain height
- [mkoryak#86](https://github.com/mkoryak/floatThead/issues/86) - do not take hidden TRs into account when calculating header height

### 1.2.7

[](#127)

- Changed license over to MIT

### 1.2.6

[](#126)

- **new stuff:**
- added support for tables with existing `` elements
- added a grunt task to build dist to master
- **bug fixes:**
- [mkoryak#57](https://github.com/mkoryak/floatThead/issues/57) - window resize issues on windows
- [mkoryak#70](https://github.com/mkoryak/floatThead/issues/70) - better support for responsive tables
- [mkoryak#71](https://github.com/mkoryak/floatThead/issues/71) - incorrectly unbinding events in destroy
- [mkoryak#75](https://github.com/mkoryak/floatThead/issues/75) - dom leakage in destroy

### 1.2.5

[](#125)

- bug fixes:
- [mkoryak#66](https://github.com/mkoryak/floatThead/issues/66)
- [mkoryak#65](https://github.com/mkoryak/floatThead/issues/65)
- [mkoryak#62](https://github.com/mkoryak/floatThead/issues/62)

### 1.2.4

[](#124)

- better support for really really wide tables
- fixed [mkoryak#53](https://github.com/mkoryak/floatThead/issues/53)
- fixed [mkoryak#56](https://github.com/mkoryak/floatThead/issues/56)

### 1.2.3

[](#123)

- removed underscore dependency, added a *slim* version which is very slightly smaller and requires underscore
- now supporting a few evil deprecated table attributes that people still use: `cellpadding` and `cellspacing`
- fixed [mkoryak#52](https://github.com/mkoryak/floatThead/issues/52)
- fixed [mkoryak#50](https://github.com/mkoryak/floatThead/issues/50)
- added floatWrapperClass option
- added copyTableClass option

### 1.2.2

[](#122)

- better support for tables with dynamically hidden columns
- can now set a class on the floating header's container div

### 1.2.1

[](#121)

- fixed issue with caption tag align:bottom
- switched to uglifyjs to minify code

### 1.2.0

[](#120)

- `caption` tag support
- faster initialization when working with large tables (and small ones)

### 1.1.1

[](#111)

- Fixed bugs introduced in 1.0.0 which caused issues in IE9

### 1.0.0

[](#100)

- Updated code to be jquery 1.9+ compliant

Who is using floatThead ?
-------------------------

[](#who-is-using-floatthead-)

### [staticsitegenerators.net](http://staticsitegenerators.net/)

[](#staticsitegeneratorsnet)

### [netdisco](http://netdisco.org)

[](#netdisco)

-

### [pylyglot](https://github.com/omaciel/pylyglot)

[](#pylyglot)

-

### [django-sql-explorer](https://github.com/epantry/django-sql-explorer)

[](#django-sql-explorer)

-

### [Yii framework](http://www.yiiframework.com/)

[](#yii-framework)

-
-

### [api.tinata.co.uk](http://api.tinata.co.uk/countries)

[](#apitinatacouk)

-

*Your site? email me: my last name at gmail*

Other plugins
-------------

[](#other-plugins)

There are plenty of other **fixed header** / **floating header** / **scrolling table header** plugins that attempt to do the same thing this plugin does. None of them support both window and overflow scrolling and many of them depend on special css or require that you set the table column widths. Some of them are good and some of them suck. Go ahead and check them out too.

I have compiled a list here with comments on each one:

| Plugin | Window Scrolling | Overflow-X Scrolling | Overflow-Y Scrolling | No Special CSS | Keeps Bound Events | Freeze Columns | |:-------------:|:-------------:|:-----:|:-------------:|:-------------:|:-----:|:-----:|:-----:| | [FloatThead](https://github.com/mkoryak/floatThead/) | yes | yes | yes | yes | yes | no | | [Fixed-Table-Header](https://github.com/markmalek/Fixed-Header-Table/) | no | yes | no | yes | no | no | | [jquery.scrollTableBody](https://github.com/nheldman/jquery.scrollTableBody) | no | yes | yes | no | ?? | no | | [Fixed table rows cols](http://meetselva.github.io/fixed-table-rows-cols) | no | yes | yes | no | ?? | yes | | [Table Fixed Header](https://github.com/oma/table-fixed-header) | yes | no | no | yes | no | no | | [Sticky Table Header](https://github.com/jmosbech/StickyTableHeaders) | yes | no | no | yes | yes | no | | [Grid](https://github.com/mmurph211/Grid) | no | yes | yes | yes | yes | no |

[Fixed-Table-Header](https://github.com/markmalek/Fixed-Header-Table/)This is the original. It has been around for ages and it will be the first plugin you find when you start looking. It also has a ton of open unresolved issues. It does not support window scrolling, it does not seem to support y-scrolling withing the container. It loses the events you attached to the thead. Lots of open issues. **Stay away.**

[Fixed table rows cols](http://meetselva.github.io/fixed-table-rows-cols)Does not support window scrolling. Requires you to specify the column widths for the table. This means that the table will not be able to optimally lay itself out. It does support freezing columns in place. If you need that, this might be the plugin for you.

[jquery.scrollTableBody](https://github.com/nheldman/jquery.scrollTableBody)Does not support window scrolling. A newcomer to the scene, not a mature project. Has some major issues with cell padding. **Stay away** until issues are resolved.

[Grid](https://github.com/mmurph211/Grid)This lib is very different from the rest because its main usecase is to give you a sortable grid. You do not run this plugin on an existing table - you need to provide a json or xml data source. This is a great lightweight replacement for datatables. This may be the plugin for you if you are not converting an existing table.

[Table Fixed Header](https://github.com/oma/table-fixed-header)This is a window scrolling plugin, does not support overflow scrolling. Does not work properly when the window is resized and the table width changes. Floated header sticks around if you scroll past table. Author welcomes pull requests but does not fix issues. **Stay away**

[Sticky Table Header](https://github.com/jmosbech/StickyTableHeaders)This is a window scrolling plugin. Does not support overflow scrolling. It is probably the best window scrolling plugin (besides this one). The author seems to fix issues as they arise.

License
-------

[](#license)

MIT

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8cd960536c07e255b2e6f7e55c03c6d09274b215ccceaccc38926ffe03e098a7?d=identicon)[bgauthier](/maintainers/bgauthier)

---

Top Contributors

[![mkoryak](https://avatars.githubusercontent.com/u/383817?v=4)](https://github.com/mkoryak "mkoryak (257 commits)")[![jurko-gospodnetic](https://avatars.githubusercontent.com/u/3112833?v=4)](https://github.com/jurko-gospodnetic "jurko-gospodnetic (5 commits)")[![rgeerts](https://avatars.githubusercontent.com/u/1899907?v=4)](https://github.com/rgeerts "rgeerts (3 commits)")[![ithielnor](https://avatars.githubusercontent.com/u/3342620?v=4)](https://github.com/ithielnor "ithielnor (2 commits)")[![vperron](https://avatars.githubusercontent.com/u/88618?v=4)](https://github.com/vperron "vperron (2 commits)")[![JelteF](https://avatars.githubusercontent.com/u/1162278?v=4)](https://github.com/JelteF "JelteF (2 commits)")[![bgauthier](https://avatars.githubusercontent.com/u/1789355?v=4)](https://github.com/bgauthier "bgauthier (2 commits)")[![XAOPT](https://avatars.githubusercontent.com/u/2543651?v=4)](https://github.com/XAOPT "XAOPT (1 commits)")[![billsaysthis](https://avatars.githubusercontent.com/u/11235?v=4)](https://github.com/billsaysthis "billsaysthis (1 commits)")[![clyfe](https://avatars.githubusercontent.com/u/40490?v=4)](https://github.com/clyfe "clyfe (1 commits)")[![mhwlng](https://avatars.githubusercontent.com/u/1388886?v=4)](https://github.com/mhwlng "mhwlng (1 commits)")[![robinpoort](https://avatars.githubusercontent.com/u/4848082?v=4)](https://github.com/robinpoort "robinpoort (1 commits)")[![weekens](https://avatars.githubusercontent.com/u/790572?v=4)](https://github.com/weekens "weekens (1 commits)")

### Embed Badge

![Health badge](/badges/intelogie-float-thead/health.svg)

```
[![Health](https://phpackages.com/badges/intelogie-float-thead/health.svg)](https://phpackages.com/packages/intelogie-float-thead)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)