Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/jQueryPlugins/DataTables-1.7.6/extras/FixedHeader/top_bottom_left_right.html @ 6286

Last change on this file since 6286 was 6286, checked in by dkahn, 13 years ago

#1198 Added jQuery plus plugins
File size: 15.3 KB
RevLine 
[6286]1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3  <head>
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">
6   
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      @import "media/css/TableTools.css";
12      .FixedHeader_Cloned th {
13        background-color: white;
14      }
15      th, td {
16        height: 30px;
17      }
18      .left_cell {
19        background-color: white  !important;
20        border-right: 1px solid black  !important;
21        text-align: center;
22      }
23      .right_cell {
24        background-color: white !important;
25        border-left: 1px solid black;
26        text-align: center;
27      }
28      #info {
29        position: absolute;
30        top: 100px;
31        left: 100px;
32        width: 300px;
33        background-color: white;
34        border: 1px solid blue;
35        z-index: 50;
36        padding: 20px;
37      }
38    </style>
39    <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
40    <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
41    <script type="text/javascript" charset="utf-8" src="js/FixedHeader.js"></script>
42    <script type="text/javascript" charset="utf-8">
43      $(document).ready( function () {
44        var oTable = $('#example').dataTable( {
45          "iDisplayLength": -1,
46          "bFilter": false,
47          "bInfo": false,
48          "bPaginate": false,
49          "bLengthChange": false,
50          "fnDrawCallback": function ( oSettings ) {
51            for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
52            {
53              $('td:eq(0), td:eq(6)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
54            }
55          },
56          "aoColumns": [
57            {"bSortable": false, "sWidth": "20px" },
58            null, null, null, null, null,
59            {"bSortable": false, "sWidth": "20px" }
60          ]
61        } );
62        new FixedHeader( oTable, { "left": true, "right": true, "bottom": true } );
63      } );
64    </script>
65  </head>
66  <body id="dt_example">
67    <div id="info">
68      <h1 style="margin: 0; border-width:0">FixedHeader example - top, bottom, left and right fixed</h1>
69      <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>
70    </div>
71   
72    <div style="width:2000px; height: 2000px">
73<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
74  <thead>
75    <tr>
76      <th></th>
77      <th>Rendering engine</th>
78      <th>Browser</th>
79      <th>Platform(s)</th>
80      <th>Engine version</th>
81      <th>CSS grade</th>
82      <th></th>
83    </tr>
84  </thead>
85  <tbody>
86    <tr class="gradeX">
87      <td class="left_cell"> </td>
88      <td>Trident</td>
89      <td>Internet
90         Explorer 4.0</td>
91      <td>Win 95+</td>
92      <td class="center">4</td>
93      <td class="center">X</td>
94      <td class="right_cell"> </td>
95    </tr>
96    <tr class="gradeC">
97      <td class="left_cell"> </td>
98      <td>Trident</td>
99      <td>Internet
100         Explorer 5.0</td>
101      <td>Win 95+</td>
102      <td class="center">5</td>
103      <td class="center">C</td>
104      <td class="right_cell"> </td>
105    </tr>
106    <tr class="gradeA">
107      <td class="left_cell"> </td>
108      <td>Trident</td>
109      <td>Internet
110         Explorer 5.5</td>
111      <td>Win 95+</td>
112      <td class="center">5.5</td>
113      <td class="center">A</td>
114      <td class="right_cell"> </td>
115    </tr>
116    <tr class="gradeA">
117      <td class="left_cell"> </td>
118      <td>Trident</td>
119      <td>Internet
120         Explorer 6</td>
121      <td>Win 98+</td>
122      <td class="center">6</td>
123      <td class="center">A</td>
124      <td class="right_cell"> </td>
125    </tr>
126    <tr class="gradeA">
127      <td class="left_cell"> </td>
128      <td>Trident</td>
129      <td>Internet Explorer 7</td>
130      <td>Win XP SP2+</td>
131      <td class="center">7</td>
132      <td class="center">A</td>
133      <td class="right_cell"> </td>
134    </tr>
135    <tr class="gradeA">
136      <td class="left_cell"> </td>
137      <td>Trident</td>
138      <td>AOL browser (AOL desktop)</td>
139      <td>Win XP</td>
140      <td class="center">6</td>
141      <td class="center">A</td>
142      <td class="right_cell"> </td>
143    </tr>
144    <tr class="gradeA">
145      <td class="left_cell"> </td>
146      <td>Gecko</td>
147      <td>Firefox 1.0</td>
148      <td>Win 98+ / OSX.2+</td>
149      <td class="center">1.7</td>
150      <td class="center">A</td>
151      <td class="right_cell"> </td>
152    </tr>
153    <tr class="gradeA">
154      <td class="left_cell"> </td>
155      <td>Gecko</td>
156      <td>Firefox 1.5</td>
157      <td>Win 98+ / OSX.2+</td>
158      <td class="center">1.8</td>
159      <td class="center">A</td>
160      <td class="right_cell"> </td>
161    </tr>
162    <tr class="gradeA">
163      <td class="left_cell"> </td>
164      <td>Gecko</td>
165      <td>Firefox 2.0</td>
166      <td>Win 98+ / OSX.2+</td>
167      <td class="center">1.8</td>
168      <td class="center">A</td>
169      <td class="right_cell"> </td>
170    </tr>
171    <tr class="gradeA">
172      <td class="left_cell"> </td>
173      <td>Gecko</td>
174      <td>Firefox 3.0</td>
175      <td>Win 2k+ / OSX.3+</td>
176      <td class="center">1.9</td>
177      <td class="center">A</td>
178      <td class="right_cell"> </td>
179    </tr>
180    <tr class="gradeA">
181      <td class="left_cell"> </td>
182      <td>Gecko</td>
183      <td>Camino 1.0</td>
184      <td>OSX.2+</td>
185      <td class="center">1.8</td>
186      <td class="center">A</td>
187      <td class="right_cell"> </td>
188    </tr>
189    <tr class="gradeA">
190      <td class="left_cell"> </td>
191      <td>Gecko</td>
192      <td>Camino 1.5</td>
193      <td>OSX.3+</td>
194      <td class="center">1.8</td>
195      <td class="center">A</td>
196      <td class="right_cell"> </td>
197    </tr>
198    <tr class="gradeA">
199      <td class="left_cell"> </td>
200      <td>Gecko</td>
201      <td>Netscape 7.2</td>
202      <td>Win 95+ / Mac OS 8.6-9.2</td>
203      <td class="center">1.7</td>
204      <td class="center">A</td>
205      <td class="right_cell"> </td>
206    </tr>
207    <tr class="gradeA">
208      <td class="left_cell"> </td>
209      <td>Gecko</td>
210      <td>Netscape Browser 8</td>
211      <td>Win 98SE+</td>
212      <td class="center">1.7</td>
213      <td class="center">A</td>
214      <td class="right_cell"> </td>
215    </tr>
216    <tr class="gradeA">
217      <td class="left_cell"> </td>
218      <td>Gecko</td>
219      <td>Netscape Navigator 9</td>
220      <td>Win 98+ / OSX.2+</td>
221      <td class="center">1.8</td>
222      <td class="center">A</td>
223      <td class="right_cell"> </td>
224    </tr>
225    <tr class="gradeA">
226      <td class="left_cell"> </td>
227      <td>Gecko</td>
228      <td>Mozilla 1.0</td>
229      <td>Win 95+ / OSX.1+</td>
230      <td class="center">1</td>
231      <td class="center">A</td>
232      <td class="right_cell"> </td>
233    </tr>
234    <tr class="gradeA">
235      <td class="left_cell"> </td>
236      <td>Gecko</td>
237      <td>Mozilla 1.1</td>
238      <td>Win 95+ / OSX.1+</td>
239      <td class="center">1.1</td>
240      <td class="center">A</td>
241      <td class="right_cell"> </td>
242    </tr>
243    <tr class="gradeA">
244      <td class="left_cell"> </td>
245      <td>Gecko</td>
246      <td>Mozilla 1.2</td>
247      <td>Win 95+ / OSX.1+</td>
248      <td class="center">1.2</td>
249      <td class="center">A</td>
250      <td class="right_cell"> </td>
251    </tr>
252    <tr class="gradeA">
253      <td class="left_cell"> </td>
254      <td>Gecko</td>
255      <td>Mozilla 1.3</td>
256      <td>Win 95+ / OSX.1+</td>
257      <td class="center">1.3</td>
258      <td class="center">A</td>
259      <td class="right_cell"> </td>
260    </tr>
261    <tr class="gradeA">
262      <td class="left_cell"> </td>
263      <td>Gecko</td>
264      <td>Mozilla 1.4</td>
265      <td>Win 95+ / OSX.1+</td>
266      <td class="center">1.4</td>
267      <td class="center">A</td>
268      <td class="right_cell"> </td>
269    </tr>
270    <tr class="gradeA">
271      <td class="left_cell"> </td>
272      <td>Gecko</td>
273      <td>Mozilla 1.5</td>
274      <td>Win 95+ / OSX.1+</td>
275      <td class="center">1.5</td>
276      <td class="center">A</td>
277      <td class="right_cell"> </td>
278    </tr>
279    <tr class="gradeA">
280      <td class="left_cell"> </td>
281      <td>Gecko</td>
282      <td>Mozilla 1.6</td>
283      <td>Win 95+ / OSX.1+</td>
284      <td class="center">1.6</td>
285      <td class="center">A</td>
286      <td class="right_cell"> </td>
287    </tr>
288    <tr class="gradeA">
289      <td class="left_cell"> </td>
290      <td>Gecko</td>
291      <td>Mozilla 1.7</td>
292      <td>Win 98+ / OSX.1+</td>
293      <td class="center">1.7</td>
294      <td class="center">A</td>
295      <td class="right_cell"> </td>
296    </tr>
297    <tr class="gradeA">
298      <td class="left_cell"> </td>
299      <td>Gecko</td>
300      <td>Mozilla 1.8</td>
301      <td>Win 98+ / OSX.1+</td>
302      <td class="center">1.8</td>
303      <td class="center">A</td>
304      <td class="right_cell"> </td>
305    </tr>
306    <tr class="gradeA">
307      <td class="left_cell"> </td>
308      <td>Gecko</td>
309      <td>Seamonkey 1.1</td>
310      <td>Win 98+ / OSX.2+</td>
311      <td class="center">1.8</td>
312      <td class="center">A</td>
313      <td class="right_cell"> </td>
314    </tr>
315    <tr class="gradeA">
316      <td class="left_cell"> </td>
317      <td>Gecko</td>
318      <td>Epiphany 2.20</td>
319      <td>Gnome</td>
320      <td class="center">1.8</td>
321      <td class="center">A</td>
322      <td class="right_cell"> </td>
323    </tr>
324    <tr class="gradeA">
325      <td class="left_cell"> </td>
326      <td>Webkit</td>
327      <td>Safari 1.2</td>
328      <td>OSX.3</td>
329      <td class="center">125.5</td>
330      <td class="center">A</td>
331      <td class="right_cell"> </td>
332    </tr>
333    <tr class="gradeA">
334      <td class="left_cell"> </td>
335      <td>Webkit</td>
336      <td>Safari 1.3</td>
337      <td>OSX.3</td>
338      <td class="center">312.8</td>
339      <td class="center">A</td>
340      <td class="right_cell"> </td>
341    </tr>
342    <tr class="gradeA">
343      <td class="left_cell"> </td>
344      <td>Webkit</td>
345      <td>Safari 2.0</td>
346      <td>OSX.4+</td>
347      <td class="center">419.3</td>
348      <td class="center">A</td>
349      <td class="right_cell"> </td>
350    </tr>
351    <tr class="gradeA">
352      <td class="left_cell"> </td>
353      <td>Webkit</td>
354      <td>Safari 3.0</td>
355      <td>OSX.4+</td>
356      <td class="center">522.1</td>
357      <td class="center">A</td>
358      <td class="right_cell"> </td>
359    </tr>
360    <tr class="gradeA">
361      <td class="left_cell"> </td>
362      <td>Webkit</td>
363      <td>OmniWeb 5.5</td>
364      <td>OSX.4+</td>
365      <td class="center">420</td>
366      <td class="center">A</td>
367      <td class="right_cell"> </td>
368    </tr>
369    <tr class="gradeA">
370      <td class="left_cell"> </td>
371      <td>Webkit</td>
372      <td>iPod Touch / iPhone</td>
373      <td>iPod</td>
374      <td class="center">420.1</td>
375      <td class="center">A</td>
376      <td class="right_cell"> </td>
377    </tr>
378    <tr class="gradeA">
379      <td class="left_cell"> </td>
380      <td>Webkit</td>
381      <td>S60</td>
382      <td>S60</td>
383      <td class="center">413</td>
384      <td class="center">A</td>
385      <td class="right_cell"> </td>
386    </tr>
387    <tr class="gradeA">
388      <td class="left_cell"> </td>
389      <td>Presto</td>
390      <td>Opera 7.0</td>
391      <td>Win 95+ / OSX.1+</td>
392      <td class="center">-</td>
393      <td class="center">A</td>
394      <td class="right_cell"> </td>
395    </tr>
396    <tr class="gradeA">
397      <td class="left_cell"> </td>
398      <td>Presto</td>
399      <td>Opera 7.5</td>
400      <td>Win 95+ / OSX.2+</td>
401      <td class="center">-</td>
402      <td class="center">A</td>
403      <td class="right_cell"> </td>
404    </tr>
405    <tr class="gradeA">
406      <td class="left_cell"> </td>
407      <td>Presto</td>
408      <td>Opera 8.0</td>
409      <td>Win 95+ / OSX.2+</td>
410      <td class="center">-</td>
411      <td class="center">A</td>
412      <td class="right_cell"> </td>
413    </tr>
414    <tr class="gradeA">
415      <td class="left_cell"> </td>
416      <td>Presto</td>
417      <td>Opera 8.5</td>
418      <td>Win 95+ / OSX.2+</td>
419      <td class="center">-</td>
420      <td class="center">A</td>
421      <td class="right_cell"> </td>
422    </tr>
423    <tr class="gradeA">
424      <td class="left_cell"> </td>
425      <td>Presto</td>
426      <td>Opera 9.0</td>
427      <td>Win 95+ / OSX.3+</td>
428      <td class="center">-</td>
429      <td class="center">A</td>
430      <td class="right_cell"> </td>
431    </tr>
432    <tr class="gradeA">
433      <td class="left_cell"> </td>
434      <td>Presto</td>
435      <td>Opera 9.2</td>
436      <td>Win 88+ / OSX.3+</td>
437      <td class="center">-</td>
438      <td class="center">A</td>
439      <td class="right_cell"> </td>
440    </tr>
441    <tr class="gradeA">
442      <td class="left_cell"> </td>
443      <td>Presto</td>
444      <td>Opera 9.5</td>
445      <td>Win 88+ / OSX.3+</td>
446      <td class="center">-</td>
447      <td class="center">A</td>
448      <td class="right_cell"> </td>
449    </tr>
450    <tr class="gradeA">
451      <td class="left_cell"> </td>
452      <td>Presto</td>
453      <td>Opera for Wii</td>
454      <td>Wii</td>
455      <td class="center">-</td>
456      <td class="center">A</td>
457      <td class="right_cell"> </td>
458    </tr>
459    <tr class="gradeA">
460      <td class="left_cell"> </td>
461      <td>Presto</td>
462      <td>Nokia N800</td>
463      <td>N800</td>
464      <td class="center">-</td>
465      <td class="center">A</td>
466      <td class="right_cell"> </td>
467    </tr>
468    <tr class="gradeA">
469      <td class="left_cell"> </td>
470      <td>Presto</td>
471      <td>Nintendo DS browser</td>
472      <td>Nintendo DS</td>
473      <td class="center">8.5</td>
474      <td class="center">C/A<sup>1</sup></td>
475      <td class="right_cell"> </td>
476    </tr>
477    <tr class="gradeC">
478      <td class="left_cell"> </td>
479      <td>KHTML</td>
480      <td>Konqureror 3.1</td>
481      <td>KDE 3.1</td>
482      <td class="center">3.1</td>
483      <td class="center">C</td>
484      <td class="right_cell"> </td>
485    </tr>
486    <tr class="gradeA">
487      <td class="left_cell"> </td>
488      <td>KHTML</td>
489      <td>Konqureror 3.3</td>
490      <td>KDE 3.3</td>
491      <td class="center">3.3</td>
492      <td class="center">A</td>
493      <td class="right_cell"> </td>
494    </tr>
495    <tr class="gradeA">
496      <td class="left_cell"> </td>
497      <td>KHTML</td>
498      <td>Konqureror 3.5</td>
499      <td>KDE 3.5</td>
500      <td class="center">3.5</td>
501      <td class="center">A</td>
502      <td class="right_cell"> </td>
503    </tr>
504    <tr class="gradeX">
505      <td class="left_cell"> </td>
506      <td>Tasman</td>
507      <td>Internet Explorer 4.5</td>
508      <td>Mac OS 8-9</td>
509      <td class="center">-</td>
510      <td class="center">X</td>
511      <td class="right_cell"> </td>
512    </tr>
513    <tr class="gradeC">
514      <td class="left_cell"> </td>
515      <td>Tasman</td>
516      <td>Internet Explorer 5.1</td>
517      <td>Mac OS 7.6-9</td>
518      <td class="center">1</td>
519      <td class="center">C</td>
520      <td class="right_cell"> </td>
521    </tr>
522    <tr class="gradeC">
523      <td class="left_cell"> </td>
524      <td>Tasman</td>
525      <td>Internet Explorer 5.2</td>
526      <td>Mac OS 8-X</td>
527      <td class="center">1</td>
528      <td class="center">C</td>
529      <td class="right_cell"> </td>
530    </tr>
531    <tr class="gradeA">
532      <td class="left_cell"> </td>
533      <td>Misc</td>
534      <td>NetFront 3.1</td>
535      <td>Embedded devices</td>
536      <td class="center">-</td>
537      <td class="center">C</td>
538      <td class="right_cell"> </td>
539    </tr>
540    <tr class="gradeA">
541      <td class="left_cell"> </td>
542      <td>Misc</td>
543      <td>NetFront 3.4</td>
544      <td>Embedded devices</td>
545      <td class="center">-</td>
546      <td class="center">A</td>
547      <td class="right_cell"> </td>
548    </tr>
549    <tr class="gradeX">
550      <td class="left_cell"> </td>
551      <td>Misc</td>
552      <td>Dillo 0.8</td>
553      <td>Embedded devices</td>
554      <td class="center">-</td>
555      <td class="center">X</td>
556      <td class="right_cell"> </td>
557    </tr>
558    <tr class="gradeX">
559      <td class="left_cell"> </td>
560      <td>Misc</td>
561      <td>Links</td>
562      <td>Text only</td>
563      <td class="center">-</td>
564      <td class="center">X</td>
565      <td class="right_cell"> </td>
566    </tr>
567    <tr class="gradeX">
568      <td class="left_cell"> </td>
569      <td>Misc</td>
570      <td>Lynx</td>
571      <td>Text only</td>
572      <td class="center">-</td>
573      <td class="center">X</td>
574      <td class="right_cell"> </td>
575    </tr>
576    <tr class="gradeC">
577      <td class="left_cell"> </td>
578      <td>Misc</td>
579      <td>IE Mobile</td>
580      <td>Windows Mobile 6</td>
581      <td class="center">-</td>
582      <td class="center">C</td>
583      <td class="right_cell"> </td>
584    </tr>
585    <tr class="gradeC">
586      <td class="left_cell"> </td>
587      <td>Misc</td>
588      <td>PSP browser</td>
589      <td>PSP</td>
590      <td class="center">-</td>
591      <td class="center">C</td>
592      <td class="right_cell"> </td>
593    </tr>
594    <tr class="gradeU">
595      <td class="left_cell"> </td>
596      <td>Other browsers</td>
597      <td>All others</td>
598      <td>-</td>
599      <td class="center">-</td>
600      <td class="center">U</td>
601      <td class="right_cell"> </td>
602    </tr>
603  </tbody>
604  <tfoot>
605    <tr>
606      <th></th>
607      <th>Rendering engine</th>
608      <th>Browser</th>
609      <th>Platform(s)</th>
610      <th>Engine version</th>
611      <th>CSS grade</th>
612      <th></th>
613    </tr>
614  </tfoot>
615</table>
616    </div>
617  </body>
618</html>
Note: See TracBrowser for help on using the repository browser.