Managed Tables - Fixed Header header small text goes here...
Key features include:
- Fix the header to the top of the window
- Ability to fix the footer and left / right columns as well
- z-Index ordering options
At times it can be useful to ensure that column titles will remain always visible on a table, even when a user scrolls down a table. The FixedHeader plug-in for DataTables will float the 'thead' element above the table at all times to help address this issue. The column titles also remain click-able to perform sorting.
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade | ||
|---|---|---|---|---|---|---|
| 1 |  |
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
| 2 |  |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
| 3 |  |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
| 4 |  |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
| 5 |  |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
| 6 |  |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
| 7 |  |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| 8 |  |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
| 9 |  |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
| 10 |  |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
| 11 |  |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
| 12 |  |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
| 13 |  |
Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
| 14 |  |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
| 15 | |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
| 16 | |
Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
| 17 | |
Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1.1 | A |
| 18 | |
Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1.2 | A |
| 19 | |
Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1.3 | A |
| 20 | |
Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1.4 | A |
| 21 | |
Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1.5 | A |
| 22 | |
Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1.6 | A |
| 23 | |
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A |
| 24 | |
Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1.8 | A |
| 25 | |
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A |
| 26 | |
Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
| 27 | |
Webkit | Safari 1.2 | OSX.3 | 125.5 | A |
| 28 | |
Webkit | Safari 1.3 | OSX.3 | 312.8 | A |
| 29 | |
Webkit | Safari 2.0 | OSX.4+ | 419.3 | A |
| 30 | |
Webkit | Safari 3.0 | OSX.4+ | 522.1 | A |
| 31 | |
Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A |
| 32 | |
Webkit | iPod Touch / iPhone | iPod | 420.1 | A |
| 33 | |
Webkit | S60 | S60 | 413 | A |
| 34 | |
Presto | Opera 7.0 | Win 95+ / OSX.1+ | - | A |
| 35 | |
Presto | Opera 7.5 | Win 95+ / OSX.2+ | - | A |
| 36 | |
Presto | Opera 8.0 | Win 95+ / OSX.2+ | - | A |
| 37 | |
Presto | Opera 8.5 | Win 95+ / OSX.2+ | - | A |
| 38 | |
Presto | Opera 9.0 | Win 95+ / OSX.3+ | - | A |
| 39 | |
Presto | Opera 9.2 | Win 88+ / OSX.3+ | - | A |
| 40 | |
Presto | Opera 9.5 | Win 88+ / OSX.3+ | - | A |
| 41 | |
Presto | Opera for Wii | Wii | - | A |
| 42 | |
Presto | Nokia N800 | N800 | - | A |
| 43 | |
Presto | Nintendo DS browser | Nintendo DS | 8.5 | C/A1 |
| 44 | |
KHTML | Konqureror 3.1 | KDE 3.1 | 3.1 | C |
| 45 | |
KHTML | Konqureror 3.3 | KDE 3.3 | 3.3 | A |
| 46 | |
KHTML | Konqureror 3.5 | KDE 3.5 | 3.5 | A |
| 47 | |
Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X |
| 48 | |
Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C |
| 49 | |
Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C |
| 50 | |
Misc | NetFront 3.1 | Embedded devices | - | C |
| 51 | |
Misc | NetFront 3.4 | Embedded devices | - | A |
| 52 | |
Misc | Dillo 0.8 | Embedded devices | - | X |
| 53 | |
Misc | Links | Text only | - | X |
| 54 | |
Misc | Lynx | Text only | - | X |
| 55 | |
Misc | IE Mobile | Windows Mobile 6 | - | C |
| 57 | |
Misc | PSP browser | PSP | - | C |
| 58 | |
Other browsers | All others | - | - | U |
<!-- required files -->
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css" rel="stylesheet" />
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="../assets/plugins/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.min.js"></script>
<!-- html -->
<table id="data-table-fixed-header" class="table table-striped table-bordered align-middle">
<thead>
<tr>
<th width="1%"></th>
<th width="1%" data-orderable="false"></th>
...
</tr>
</thead>
<tbody>
...
</tbody>
</table>
<!-- script -->
<script>
$('#data-table-fixed-header').DataTable({
lengthMenu: [20, 40, 60],
fixedHeader: {
header: true,
headerOffset: $('#header').height()
},
responsive: true
});
</script>