Skip to content

Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
license.txt
Notifications You must be signed in to change notification settings

mkoryak/floatThead

Folders and files

NameName
Last commit message
Last commit date

Latest commit

785de7a Â· Aug 22, 2016
Apr 1, 2016
Apr 8, 2014
Aug 22, 2016
Jul 31, 2014
Jul 10, 2016
Jul 13, 2015
Sep 21, 2015
Aug 22, 2016
Oct 16, 2015
Feb 9, 2016
Aug 22, 2016
Feb 9, 2016
Aug 22, 2016

Repository files navigation

jquery.floatThead v1.4.3

woot

#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.

😻My cat loves it😻

Install

Package managers

npm install floatthead
bower install floatThead

Download code

Latest Release (zip)

Via CDN

http://cdnjs.com/libraries/floatthead/ http://www.jsdelivr.com/#!jquery.floatthead

For java people

Webjar

Wrappers

angularjs directive by @brandon-barker

yii2 framework wrapper by @bluezed

Things this plugin does:


  • 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, 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.

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. Coffee/Beer donations help are welcome ;)

Requirements:

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

Supported Browsers:

Change Log

see CHANGELOG.md

Who is using floatThead ?

You are still reading this?

Like clicking on things? Check out these great domains:

License

MIT