jquery.floatThead
src="http://img.badgesize.io/https://unpkg.com/floatthead/dist/jquery.floatThead.min.js?compression=gzip&style=flat-square">

src="https://img.shields.io/npm/l/floatthead.svg?style=flat-square">


Documentation & Examples: http://mkoryak.github.io/floatThead/

Float the table header on scroll. No changes to your HTML/CSS are required, it just works.
Supports floating the header while scrolling within the window or while scrolling within a container with overflow.
Supports responsive tables.

$3

#### Package managers
``console
npm install floatthead
bower install floatThead
`
#### Download code
Latest Release (zip)

#### Via CDN
https://cdnjs.com/libraries/floatthead/
https://www.jsdelivr.com/#!jquery.floatthead
https://unpkg.com/floatthead

`html



`

#### For java people
Webjar

$3

vuejs component by @tmlee

angularjs directive by @brandon-barker

yii2 framework wrapper by @bluezed

Why not just use position:sticky?

---------
You probably should! This plugin was created years before that existed. There are still a few reasons why you might want to use this plugin:

- Your code runs in the real world, where some browsers don't support position: sticky.
- Any kind of non-standard scroll parent scenario, where the thing that you scroll with is not supported by position: sticky.
- Your table's scroll parent isn't the body, but the body is what scrolls and you can't change this.
- Your table scrolls horizontally within a container, but vertically within the page.
- Your sticky top position is dynamic, or you want to know when the header becomes sticky and you don't want to write code to do this.
- You don't want to learn these newfangled CSS things, you want a proven solution that works and uses jQuery, the greatest thing ever!




Things this plugin does:


---------
- In prod @ big corporations and opensource projects. Maintained. See open issues.
- Works on tables within a scrollable container or whole window scrolling
- Works with responsive table wrappers
- Works with dynamically hidden/added/removed columns
- Does not clone the thead - so your events stay bound
- Does what position:fixed cannot do (and on browsers that do not support it)
- Does not mess with your styles, and doesnt require any css (see fixed vs absolute position modes)
- Works with border-collapse variants, weird margins, padding and borders
- Works with libs like datatables, perfect-scrollbar, bootstrap3, and many more
- Header can be floated with position:absolute which adds a wrapper, or position:fixed which does not. Both have their pros and cons. By default the best option is chosen based on your configuration

Things this plugin 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, depending on your markup and safari version.
- RTL is not really supported - it might work in overflow scrolling mode, if you are lucky. Expects dir on html` element.
- Layout issues resulting from document zoom not being 100% are not supported.

Common Pitfalls
------
If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better read the faq.

How to get help with the floatThead
------------
All issues should be reported through github.

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

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

Supported Browsers:
-------------
- IE9 or better (must read this for ANY Internet Exploder integrations)
- Chrome, Firefox (all versions from last 10+ years)

Change Log
----------
see CHANGELOG.md

Who is using floatThead ?

$3

- Ctrl O provides simple and innovative products to help an organization's business processes. Linkspace, its flagship product, helps share information between teams and individuals, in a simple and effective manner.

$3

- A free service for the musical community

$3

- Internally, I happen to know...

$3

- The first table you see.

$3

- For the internet of things!

$3

License
-------
MIT