There are times when you have a page with a table that includes several columns and a large number of content rows. Browsing the content becomes problematic once you start scrolling down and the column headers go out of view. A sloppy user interface would just leave it as-is. A typical solution might be to insert the column titles after every 10 rows of content or so. We, of course, want a more elegant, simpler solution. This is where the THFloat plugin comes in.
THFloat enables you with a single function call to automatically make the <thead> and/or <tfoot> block of a table float/fixed/sticky, so that when the block is scrolled out of view, the block will remain visible floating at the top or bottom of the scrollable area in front of the table.
See the demo page for a few examples of THFloat in action.
/**
* v0.7.2 THFloat plugin for jQuery
* http://rommelsantor.com/jquery/thfloat
*
* Author(s): Rommel Santor
* http://rommelsantor.com
*
* This plugin allows you to float a table's <thead> or <tfoot> keeping it
* in view when it would normally be scrolled out of view.
*
* Copyright (c) 2011 by Rommel Santor <rommel at rommelsantor dot com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
@*/
/**
* >> Description <<
* The THFloat plugin for jQuery allows you to automatically float (or affix)
* either a given table's <thead>, <tfoot>, or both at the top or bottom of a
* scrolling container parent/ancestor so that they stay in view even though
* the table's <tbody> contents have been scrolled out of the visible area.
*
* This was developed and is very handy for long data tables with many columns,
* as it allows users to always know which column contains which value without
* the column header row having to be included repeatedly throughout the table
* (this is often the typical solution).
*
* >> Requirements <<
* jQuery v1.4 or better
*
* >> Version History <<
* Ver 0.7.2 - 2013-08-15 - Rommel Santor
* Replace CSS copy method with much better code by Mike Dunn. Thanks
* to Koos van der Kolk for suggesting it!
* Ver 0.7 - 2013-06-28 - Rommel Santor
* Modified selection of child <tr> elements of thead/tfoot so only
* immediate children are selected; problem was reported by Lucio Iacolettig
* when a child table was contained within the thead/tfoot of a thfloat table
* Ver 0.6 - 2013-04-11 - Rommel Santor
* Reimplementing jQuery.browser if it's not available (it was removed
* in jQuery v1.9)
* Ver 0.5 - 2012-08-10 - Rommel Santor
* Added 'noprint' option to hide floating block when page is printed.
* Thanks again to Daniel Gomez for spotting the need for that.
* Ver 0.4 - 2012-08-09 - Rommel Santor
* Daniel Gomez pointed out that when applying thfloat to multiple
* tables on a page and multiple don't have an ID attribute, the
* plugin fails. This bug is now fixed.
* Ver 0.2 - 2011-04-14 - Rommel Santor
* Added 'resize' method and made initial resize automatic; also
* cleaned up how the floater is sized when scrolling to stay in
* sync with the real table; removed widthOffset as it made the
* floater look off most of the time
* Ver 0.1.1 - 2011-03-07 - Rommel Santor
* Fixed "return;" bug in init()
* Ver 0.1 - 2011-03-01 - Rommel Santor
* Initial Release
*
* >> Tested <<
* Mozilla (Firefox 3+)
* Webkit (Chrome 9+, Safari for Windows 5+)
* MSIE 7, 8, 9
* Opera 11+
*
* >> Known issues <<
* - Safari for Mac apparently has some issues with table resizing; thanks to
* Adi Fairbank for reporting this issue; unfixable by me for now to due lack of
* development access on a Mac
* - MSIE 9 ignores the cells' (inner) borders for some reason
* - if you have any others, let me know
*/
/**
* Methods:
* .thfloat([options])
* .thfloat('init', [options]) - initialize THFloat on a new jQuery object
* options : see "Options" below
*
* .thfloat('resize', [side]) - force the floating block to resize itself
* and each cell contained within to match the parent table; useful utility
* if you modify the original table contents and want to sync it with the floater
* side : "head" or "foot"; defaults to both
*
* .thfloat('refresh', [side]) - force the floating block to refresh itself, as if
* the container has scrolled; useful for tables in blocks that toggle visibility
* side : "head" or "foot"; defaults to both
*
* .thfloat('destroy') - remove THFloat instance from jQuery object
*/
/**
* Options:
* side - the block of the table that is to be floated
* default: "head"
* "head" for <thead>
* "foot" for <tfoot>
*
* attachment - the scrolling container to which the floated block is attached
* default: window
* string selector, DOM object, or jQuery object;
*
* noprint - do not display the floating block when the page is printed
* default: true
* boolean
*
* sticky - force the floating block visible even when source block is in view
* (but not if the table is out of view entirely, of course)
* default: false
* boolean
*
* onShow - see "Overridable Events" below
*
* onHide - see "Overridable Events" below
*/
/**
* Overridable Events:
* onShow(table, block) - triggered just after a floating block is created
* table : the floating <table> holding the block and its content
* block : the temporary <thead> or <tfoot> containing the content being floated
*
* onHide(table, block) - triggered as the floating block is about to be destroyed
* table : the floating <table> holding the block and its content
* block : the temporary <thead> or <tfoot> containing the content being floated
*/
/**
* CSS Styles:
* .thfloat-table
* class is added to the cloned, floating <table> holding the cloned <thead>/<tfoot>
*
* .thfloat
* class is added to each <thead>/<tfoot> while it is floated
*
* #thfloat[head|foot]-[table_id] (default; used if source table has an id)
* #thfloathead - if side "head" and table has no id
* #thfloatfoot - if side "foot" and table has no id
* id is assigned to the floating table holding the fixed <thead> or <tfoot>
*/
If you are considerate enough to show your appreciation for this software, your contribution will be sincerely appreciated.
Feel free to send any questions/comments/suggestions to me at rommel at rommelsantor dot com.