Fork me on GitHub

This page uses bootstrap 3. FloatThead does not require any css to properly float the table header. However, it does require css to make sure that the floated header does not have a transparent background etc

Having problems using this plugin in bootstrap tabs? Take a look here.

This page has 2 tables which have the class of table table-striped table-bordered and table table-striped.


Here is the css you need to make them look decent with floatThead:

table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #FFF;
}

Because the first table is wrapped in a bootstrap3 .table-responsive wrapper, you need to specify the responsiveContainer option. This option is only applicable to window scrolling, which means that you cannot use 'scrollContainer' option together with this option.

This option makes the horizontal scrolling behave itself when scrolling within the table on smaller screen sizes.

    $(".table.with-responsive-wrapper").floatThead({
responsiveContainer: function($table){
return $table.closest(".table-responsive");
}
});
$(".table.without-responsive-wrapper").floatThead();
Note: You might also run into an issue where css from other libs is adding margin to the floated header. See this issue for a resolution.
Task Due Status Origin Appt Dest Appt Driver Carrier | Account
Sleep
load ID: 12345678 | Some Dude
34 minutes ago
Checked In
Brigton, VA
3/19/13 | 16:42 - 18:26 ET
Pooville, CA
5/25/13 | 20:20 - 20:32 ET
Mike Mikelson
(123) 456-7890
Ryder
Pepsi Co
Past PU Appt TimePay your cable bill
load ID: 12345678 | Mike Mikelson
2 minutes ago
Unloading
Brigton, VA
11/22/13 | 14:44 - 16:50 ET
Brigton, VA
5/9/13 | 15:45 - 18:40 ET
Fat Frank
(123) 456-7890
Reliable Trucking
Apple Computer
Past NCD
load ID: 12345678 | Mike Mikelson
36 minutes ago
Booked
Plum Island, NH
6/22/13 | 15:22 - 20:29 ET
Plum Island, NH
5/17/13 | 18:31 - 16:49 ET
Some Dude
(123) 456-7890
RR Donnely
Pepsi Co
Past NCD
load ID: 12345678 | Mike Mikelson
an hour ago
Booked
Pooville, CA
7/18/13 | 18:48 - 22:22 ET
Brigton, VA
6/23/13 | 18:29 - 15:35 ET
Mike Mikelson
(123) 456-7890
AAA Trucking
Apple Computer
Task Due Status Origin Appt Dest Appt Driver Carrier | Account
Confirm Driver Loaded
load ID: 12345678 | Catman
in 32 minutes
Booked
Pooville, CA
2/15/13 | 13:51 - 12:45 ET
Brigton, VA
9/8/13 | 16:38 - 15:50 ET
Mike Mikelson
(123) 456-7890
Reliable Trucking
Pepsi Co
Past PU Appt TimePay your cable bill
load ID: 12345678 | Fat Frank
in an hour
In-Transit
Washington DC
8/13/13 | 20:52 - 16:36 ET
Brigton, VA
5/21/13 | 20:42 - 19:47 ET
Catman
(123) 456-7890
RR Donnely
NSA
Confirm Driver Loaded
load ID: 12345678 | Catman
in 38 minutes
Bounced
Brigton, VA
8/23/13 | 14:28 - 14:38 ET
Brigton, VA
5/20/13 | 18:15 - 18:51 ET
Catman
(123) 456-7890
Reliable Trucking
Pepsi Co
Past PU Appt TimePay your cable bill
load ID: 12345678 | Mike Mikelson
in an hour
Booked
Pooville, CA
10/19/13 | 16:56 - 16:40 ET
Pooville, CA
9/18/13 | 16:38 - 16:25 ET
Mike Mikelson
(123) 456-7890
Ryder
Elkay
Past PU Appt TimePay your cable bill
load ID: 12345678 | Catman
in 41 minutes
Unloading
Plum Island, NH
5/19/13 | 14:32 - 16:41 ET
Brian's House
4/16/13 | 17:13 - 15:40 ET
Mike Mikelson
(123) 456-7890
Ryder
Archway
Past NCD
load ID: 12345678 | Fat Frank
in 17 minutes
Booked
Pooville, CA
4/28/13 | 17:24 - 14:17 ET
Pooville, CA
11/13/13 | 12:51 - 18:37 ET
Mike Mikelson
(123) 456-7890
Ryder
Elkay
Eat
load ID: 12345678 | Mike Mikelson
in an hour
Dispatched
Brigton, VA
9/14/13 | 15:37 - 20:31 ET
Washington DC
5/19/13 | 13:33 - 17:14 ET
Mike Mikelson
(123) 456-7890
Reliable Trucking
Elkay
Past PU Appt TimePay your cable bill
load ID: 12345678 | Mike Mikelson
in 8 minutes
Booked
Brigton, VA
2/10/13 | 15:41 - 14:56 ET
Brian's House
4/25/13 | 17:29 - 17:27 ET
Mike Mikelson
(123) 456-7890
AAA Trucking
NSA
Eat
load ID: 12345678 | Catman
in an hour
Loaded
Brian's House
7/13/13 | 15:34 - 13:31 ET
Boston, MA
4/10/13 | 14:40 - 21:36 ET
Fat Frank
(123) 456-7890
AAA Trucking
NSA
Eat
load ID: 12345678 | Catman
in 13 minutes
Dispatched
Brigton, VA
7/17/13 | 15:25 - 16:43 ET
Plum Island, NH
7/15/13 | 17:45 - 18:51 ET
Some Dude
(123) 456-7890
RR Donnely
Anthony Intl