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.
npm install floatthead bower install floatThead
For java people
vuejs component by @tmlee
angularjs directive by @brandon-barker
yii2 framework wrapper by @bluezed
Why not just use
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
- Any kind of non-standard scroll parent scenario, where the thing that you scroll with is not supported by
- 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
topposition 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:fixedcannot do (and on browsers that do not support it)
- Does not mess with your styles, and doesnt require any css (see
- 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:absolutewhich adds a wrapper, or
position:fixedwhich 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 more, if you are lucky. Expects
- Layout issues resulting from document zoom not being 100% are not supported.
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.
- jQuery 1.8.x or better (1.9 compliant) (or jQuery 1.7.x and jQuery UI core)
- IE8 or better (must read this for ANY Internet Exploder integrations)
- Chrome, Firefox (all versions from last 3 years)
Who is using floatThead ?
- 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.
- A free service for the musical community
Internally, I happen to know...
- The first table you see.
- For the internet of things!