#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.
😻My cat loves it😻
###Install
bower install floatThead
npm install floatthead
http://cdnjs.com/libraries/floatthead/
http://www.jsdelivr.com/#!jquery.floatthead
angularjs directive by @brandon-barker
yii2 framework wrapper by @bluezed
- Works on tables within a scrollable container or whole window scrolling
- Works with responsive table wrappers
- Works with dynamically hidden/added/removed columns
- Doesn't clone the thead - so your events stay bound
- Doesn't mess with your styles, and doesnt require any css
- 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, orposition:fixed
which does not. Both have their pros and cons. By default the best option is chosen based on your configuration
- 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.
If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better read the faq.
All issues should be reported through github.
I will do my best to help you in a timely manner.
- jQuery 1.8.x or better (1.9 compliant) (or jQuery 1.7.x and jQuery UI core)
- IE8 or better (read this)
- Chrome, Firefox (all versions from last 3 years)
FloatThead will not work properly in IE9 unless you have the following meta tag in the head of the page:
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
With very big tables, you may also run into this exciting bug: http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly
Watch for it.
Big thanks to jetbrains for giving me an open source webstorm license for this project. They make the best IDEs.
MIT