1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
7 <title>FixedHeader example</title>
8 <style type="text/css" title="currentStyle">
9 @import "../../media/css/demo_page.css";
10 @import "../../media/css/demo_table.css";
11 .FixedHeader_Cloned th {
12 background-color: white;
18 background-color: white !important;
19 border-right: 1px solid black !important;
23 background-color: white !important;
24 border-left: 1px solid black;
32 background-color: white;
33 border: 1px solid blue;
38 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
39 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
40 <script type="text/javascript" charset="utf-8" src="js/FixedHeader.js"></script>
41 <script type="text/javascript" charset="utf-8">
42 $(document).ready( function () {
43 var oTable = $('#example').dataTable( {
48 "bLengthChange": false,
49 "fnDrawCallback": function ( oSettings ) {
50 for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
52 $('td:eq(0), td:eq(6)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
56 {"bSortable": false, "sWidth": "20px" },
57 null, null, null, null, null,
58 {"bSortable": false, "sWidth": "20px" }
61 new FixedHeader( oTable, { "left": true, "right": true, "bottom": true } );
65 <body id="dt_example">
67 <h1 style="margin: 0; border-width:0">FixedHeader example - top, bottom, left and right fixed</h1>
68 <p>This example shows how FixedHeader can be made to look more like a spreadsheet application. Click 'View source' in your browser to see the set up.</p>
71 <div style="width:2000px; height: 2000px">
72 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
76 <th>Rendering engine</th>
79 <th>Engine version</th>
86 <td class="left_cell"> </td>
91 <td class="center">4</td>
92 <td class="center">X</td>
93 <td class="right_cell"> </td>
96 <td class="left_cell"> </td>
101 <td class="center">5</td>
102 <td class="center">C</td>
103 <td class="right_cell"> </td>
106 <td class="left_cell"> </td>
111 <td class="center">5.5</td>
112 <td class="center">A</td>
113 <td class="right_cell"> </td>
116 <td class="left_cell"> </td>
121 <td class="center">6</td>
122 <td class="center">A</td>
123 <td class="right_cell"> </td>
126 <td class="left_cell"> </td>
128 <td>Internet Explorer 7</td>
130 <td class="center">7</td>
131 <td class="center">A</td>
132 <td class="right_cell"> </td>
135 <td class="left_cell"> </td>
137 <td>AOL browser (AOL desktop)</td>
139 <td class="center">6</td>
140 <td class="center">A</td>
141 <td class="right_cell"> </td>
144 <td class="left_cell"> </td>
147 <td>Win 98+ / OSX.2+</td>
148 <td class="center">1.7</td>
149 <td class="center">A</td>
150 <td class="right_cell"> </td>
153 <td class="left_cell"> </td>
156 <td>Win 98+ / OSX.2+</td>
157 <td class="center">1.8</td>
158 <td class="center">A</td>
159 <td class="right_cell"> </td>
162 <td class="left_cell"> </td>
165 <td>Win 98+ / OSX.2+</td>
166 <td class="center">1.8</td>
167 <td class="center">A</td>
168 <td class="right_cell"> </td>
171 <td class="left_cell"> </td>
174 <td>Win 2k+ / OSX.3+</td>
175 <td class="center">1.9</td>
176 <td class="center">A</td>
177 <td class="right_cell"> </td>
180 <td class="left_cell"> </td>
184 <td class="center">1.8</td>
185 <td class="center">A</td>
186 <td class="right_cell"> </td>
189 <td class="left_cell"> </td>
193 <td class="center">1.8</td>
194 <td class="center">A</td>
195 <td class="right_cell"> </td>
198 <td class="left_cell"> </td>
200 <td>Netscape 7.2</td>
201 <td>Win 95+ / Mac OS 8.6-9.2</td>
202 <td class="center">1.7</td>
203 <td class="center">A</td>
204 <td class="right_cell"> </td>
207 <td class="left_cell"> </td>
209 <td>Netscape Browser 8</td>
211 <td class="center">1.7</td>
212 <td class="center">A</td>
213 <td class="right_cell"> </td>
216 <td class="left_cell"> </td>
218 <td>Netscape Navigator 9</td>
219 <td>Win 98+ / OSX.2+</td>
220 <td class="center">1.8</td>
221 <td class="center">A</td>
222 <td class="right_cell"> </td>
225 <td class="left_cell"> </td>
228 <td>Win 95+ / OSX.1+</td>
229 <td class="center">1</td>
230 <td class="center">A</td>
231 <td class="right_cell"> </td>
234 <td class="left_cell"> </td>
237 <td>Win 95+ / OSX.1+</td>
238 <td class="center">1.1</td>
239 <td class="center">A</td>
240 <td class="right_cell"> </td>
243 <td class="left_cell"> </td>
246 <td>Win 95+ / OSX.1+</td>
247 <td class="center">1.2</td>
248 <td class="center">A</td>
249 <td class="right_cell"> </td>
252 <td class="left_cell"> </td>
255 <td>Win 95+ / OSX.1+</td>
256 <td class="center">1.3</td>
257 <td class="center">A</td>
258 <td class="right_cell"> </td>
261 <td class="left_cell"> </td>
264 <td>Win 95+ / OSX.1+</td>
265 <td class="center">1.4</td>
266 <td class="center">A</td>
267 <td class="right_cell"> </td>
270 <td class="left_cell"> </td>
273 <td>Win 95+ / OSX.1+</td>
274 <td class="center">1.5</td>
275 <td class="center">A</td>
276 <td class="right_cell"> </td>
279 <td class="left_cell"> </td>
282 <td>Win 95+ / OSX.1+</td>
283 <td class="center">1.6</td>
284 <td class="center">A</td>
285 <td class="right_cell"> </td>
288 <td class="left_cell"> </td>
291 <td>Win 98+ / OSX.1+</td>
292 <td class="center">1.7</td>
293 <td class="center">A</td>
294 <td class="right_cell"> </td>
297 <td class="left_cell"> </td>
300 <td>Win 98+ / OSX.1+</td>
301 <td class="center">1.8</td>
302 <td class="center">A</td>
303 <td class="right_cell"> </td>
306 <td class="left_cell"> </td>
308 <td>Seamonkey 1.1</td>
309 <td>Win 98+ / OSX.2+</td>
310 <td class="center">1.8</td>
311 <td class="center">A</td>
312 <td class="right_cell"> </td>
315 <td class="left_cell"> </td>
317 <td>Epiphany 2.20</td>
319 <td class="center">1.8</td>
320 <td class="center">A</td>
321 <td class="right_cell"> </td>
324 <td class="left_cell"> </td>
328 <td class="center">125.5</td>
329 <td class="center">A</td>
330 <td class="right_cell"> </td>
333 <td class="left_cell"> </td>
337 <td class="center">312.8</td>
338 <td class="center">A</td>
339 <td class="right_cell"> </td>
342 <td class="left_cell"> </td>
346 <td class="center">419.3</td>
347 <td class="center">A</td>
348 <td class="right_cell"> </td>
351 <td class="left_cell"> </td>
355 <td class="center">522.1</td>
356 <td class="center">A</td>
357 <td class="right_cell"> </td>
360 <td class="left_cell"> </td>
364 <td class="center">420</td>
365 <td class="center">A</td>
366 <td class="right_cell"> </td>
369 <td class="left_cell"> </td>
371 <td>iPod Touch / iPhone</td>
373 <td class="center">420.1</td>
374 <td class="center">A</td>
375 <td class="right_cell"> </td>
378 <td class="left_cell"> </td>
382 <td class="center">413</td>
383 <td class="center">A</td>
384 <td class="right_cell"> </td>
387 <td class="left_cell"> </td>
390 <td>Win 95+ / OSX.1+</td>
391 <td class="center">-</td>
392 <td class="center">A</td>
393 <td class="right_cell"> </td>
396 <td class="left_cell"> </td>
399 <td>Win 95+ / OSX.2+</td>
400 <td class="center">-</td>
401 <td class="center">A</td>
402 <td class="right_cell"> </td>
405 <td class="left_cell"> </td>
408 <td>Win 95+ / OSX.2+</td>
409 <td class="center">-</td>
410 <td class="center">A</td>
411 <td class="right_cell"> </td>
414 <td class="left_cell"> </td>
417 <td>Win 95+ / OSX.2+</td>
418 <td class="center">-</td>
419 <td class="center">A</td>
420 <td class="right_cell"> </td>
423 <td class="left_cell"> </td>
426 <td>Win 95+ / OSX.3+</td>
427 <td class="center">-</td>
428 <td class="center">A</td>
429 <td class="right_cell"> </td>
432 <td class="left_cell"> </td>
435 <td>Win 88+ / OSX.3+</td>
436 <td class="center">-</td>
437 <td class="center">A</td>
438 <td class="right_cell"> </td>
441 <td class="left_cell"> </td>
444 <td>Win 88+ / OSX.3+</td>
445 <td class="center">-</td>
446 <td class="center">A</td>
447 <td class="right_cell"> </td>
450 <td class="left_cell"> </td>
452 <td>Opera for Wii</td>
454 <td class="center">-</td>
455 <td class="center">A</td>
456 <td class="right_cell"> </td>
459 <td class="left_cell"> </td>
463 <td class="center">-</td>
464 <td class="center">A</td>
465 <td class="right_cell"> </td>
468 <td class="left_cell"> </td>
470 <td>Nintendo DS browser</td>
472 <td class="center">8.5</td>
473 <td class="center">C/A<sup>1</sup></td>
474 <td class="right_cell"> </td>
477 <td class="left_cell"> </td>
479 <td>Konqureror 3.1</td>
481 <td class="center">3.1</td>
482 <td class="center">C</td>
483 <td class="right_cell"> </td>
486 <td class="left_cell"> </td>
488 <td>Konqureror 3.3</td>
490 <td class="center">3.3</td>
491 <td class="center">A</td>
492 <td class="right_cell"> </td>
495 <td class="left_cell"> </td>
497 <td>Konqureror 3.5</td>
499 <td class="center">3.5</td>
500 <td class="center">A</td>
501 <td class="right_cell"> </td>
504 <td class="left_cell"> </td>
506 <td>Internet Explorer 4.5</td>
508 <td class="center">-</td>
509 <td class="center">X</td>
510 <td class="right_cell"> </td>
513 <td class="left_cell"> </td>
515 <td>Internet Explorer 5.1</td>
516 <td>Mac OS 7.6-9</td>
517 <td class="center">1</td>
518 <td class="center">C</td>
519 <td class="right_cell"> </td>
522 <td class="left_cell"> </td>
524 <td>Internet Explorer 5.2</td>
526 <td class="center">1</td>
527 <td class="center">C</td>
528 <td class="right_cell"> </td>
531 <td class="left_cell"> </td>
533 <td>NetFront 3.1</td>
534 <td>Embedded devices</td>
535 <td class="center">-</td>
536 <td class="center">C</td>
537 <td class="right_cell"> </td>
540 <td class="left_cell"> </td>
542 <td>NetFront 3.4</td>
543 <td>Embedded devices</td>
544 <td class="center">-</td>
545 <td class="center">A</td>
546 <td class="right_cell"> </td>
549 <td class="left_cell"> </td>
552 <td>Embedded devices</td>
553 <td class="center">-</td>
554 <td class="center">X</td>
555 <td class="right_cell"> </td>
558 <td class="left_cell"> </td>
562 <td class="center">-</td>
563 <td class="center">X</td>
564 <td class="right_cell"> </td>
567 <td class="left_cell"> </td>
571 <td class="center">-</td>
572 <td class="center">X</td>
573 <td class="right_cell"> </td>
576 <td class="left_cell"> </td>
579 <td>Windows Mobile 6</td>
580 <td class="center">-</td>
581 <td class="center">C</td>
582 <td class="right_cell"> </td>
585 <td class="left_cell"> </td>
589 <td class="center">-</td>
590 <td class="center">C</td>
591 <td class="right_cell"> </td>
594 <td class="left_cell"> </td>
595 <td>Other browsers</td>
598 <td class="center">-</td>
599 <td class="center">U</td>
600 <td class="right_cell"> </td>
606 <th>Rendering engine</th>
609 <th>Engine version</th>