Mercurial > repos > saskia-hiltemann > ireport

comparison DataTables-1.9.4/extras/FixedHeader/top_bottom_left_right.html @ 0:ac5f9272033b draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:ac5f9272033b
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 .FixedHeader_Cloned th {
12 background-color: white;
13 }
14 th, td {
15 height: 30px;
16 }
17 .left_cell {
18 background-color: white !important;
19 border-right: 1px solid black !important;
20 text-align: center;
21 }
22 .right_cell {
23 background-color: white !important;
24 border-left: 1px solid black;
25 text-align: center;
26 }
27 #info {
28 position: absolute;
29 top: 100px;
30 left: 100px;
31 width: 300px;
32 background-color: white;
33 border: 1px solid blue;
34 z-index: 50;
35 padding: 20px;
36 }
37 </style>
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( {
44 "iDisplayLength": -1,
45 "bFilter": false,
46 "bInfo": false,
47 "bPaginate": false,
48 "bLengthChange": false,
49 "fnDrawCallback": function ( oSettings ) {
50 for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
51 {
52 $('td:eq(0), td:eq(6)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
53 }
54 },
55 "aoColumns": [
56 {"bSortable": false, "sWidth": "20px" },
57 null, null, null, null, null,
58 {"bSortable": false, "sWidth": "20px" }
59 ]
60 } );
61 new FixedHeader( oTable, { "left": true, "right": true, "bottom": true } );
62 } );
63 </script>
64 </head>
65 <body id="dt_example">
66 <div id="info">
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>
69 </div>
70
71 <div style="width:2000px; height: 2000px">
72 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
73 <thead>
74 <tr>
75 <th></th>
76 <th>Rendering engine</th>
77 <th>Browser</th>
78 <th>Platform(s)</th>
79 <th>Engine version</th>
80 <th>CSS grade</th>
81 <th></th>
82 </tr>
83 </thead>
84 <tbody>
85 <tr class="gradeX">
86 <td class="left_cell"> </td>
87 <td>Trident</td>
88 <td>Internet
89 Explorer 4.0</td>
90 <td>Win 95+</td>
91 <td class="center">4</td>
92 <td class="center">X</td>
93 <td class="right_cell"> </td>
94 </tr>
95 <tr class="gradeC">
96 <td class="left_cell"> </td>
97 <td>Trident</td>
98 <td>Internet
99 Explorer 5.0</td>
100 <td>Win 95+</td>
101 <td class="center">5</td>
102 <td class="center">C</td>
103 <td class="right_cell"> </td>
104 </tr>
105 <tr class="gradeA">
106 <td class="left_cell"> </td>
107 <td>Trident</td>
108 <td>Internet
109 Explorer 5.5</td>
110 <td>Win 95+</td>
111 <td class="center">5.5</td>
112 <td class="center">A</td>
113 <td class="right_cell"> </td>
114 </tr>
115 <tr class="gradeA">
116 <td class="left_cell"> </td>
117 <td>Trident</td>
118 <td>Internet
119 Explorer 6</td>
120 <td>Win 98+</td>
121 <td class="center">6</td>
122 <td class="center">A</td>
123 <td class="right_cell"> </td>
124 </tr>
125 <tr class="gradeA">
126 <td class="left_cell"> </td>
127 <td>Trident</td>
128 <td>Internet Explorer 7</td>
129 <td>Win XP SP2+</td>
130 <td class="center">7</td>
131 <td class="center">A</td>
132 <td class="right_cell"> </td>
133 </tr>
134 <tr class="gradeA">
135 <td class="left_cell"> </td>
136 <td>Trident</td>
137 <td>AOL browser (AOL desktop)</td>
138 <td>Win XP</td>
139 <td class="center">6</td>
140 <td class="center">A</td>
141 <td class="right_cell"> </td>
142 </tr>
143 <tr class="gradeA">
144 <td class="left_cell"> </td>
145 <td>Gecko</td>
146 <td>Firefox 1.0</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>
151 </tr>
152 <tr class="gradeA">
153 <td class="left_cell"> </td>
154 <td>Gecko</td>
155 <td>Firefox 1.5</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>
160 </tr>
161 <tr class="gradeA">
162 <td class="left_cell"> </td>
163 <td>Gecko</td>
164 <td>Firefox 2.0</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>
169 </tr>
170 <tr class="gradeA">
171 <td class="left_cell"> </td>
172 <td>Gecko</td>
173 <td>Firefox 3.0</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>
178 </tr>
179 <tr class="gradeA">
180 <td class="left_cell"> </td>
181 <td>Gecko</td>
182 <td>Camino 1.0</td>
183 <td>OSX.2+</td>
184 <td class="center">1.8</td>
185 <td class="center">A</td>
186 <td class="right_cell"> </td>
187 </tr>
188 <tr class="gradeA">
189 <td class="left_cell"> </td>
190 <td>Gecko</td>
191 <td>Camino 1.5</td>
192 <td>OSX.3+</td>
193 <td class="center">1.8</td>
194 <td class="center">A</td>
195 <td class="right_cell"> </td>
196 </tr>
197 <tr class="gradeA">
198 <td class="left_cell"> </td>
199 <td>Gecko</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>
205 </tr>
206 <tr class="gradeA">
207 <td class="left_cell"> </td>
208 <td>Gecko</td>
209 <td>Netscape Browser 8</td>
210 <td>Win 98SE+</td>
211 <td class="center">1.7</td>
212 <td class="center">A</td>
213 <td class="right_cell"> </td>
214 </tr>
215 <tr class="gradeA">
216 <td class="left_cell"> </td>
217 <td>Gecko</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>
223 </tr>
224 <tr class="gradeA">
225 <td class="left_cell"> </td>
226 <td>Gecko</td>
227 <td>Mozilla 1.0</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>
232 </tr>
233 <tr class="gradeA">
234 <td class="left_cell"> </td>
235 <td>Gecko</td>
236 <td>Mozilla 1.1</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>
241 </tr>
242 <tr class="gradeA">
243 <td class="left_cell"> </td>
244 <td>Gecko</td>
245 <td>Mozilla 1.2</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>
250 </tr>
251 <tr class="gradeA">
252 <td class="left_cell"> </td>
253 <td>Gecko</td>
254 <td>Mozilla 1.3</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>
259 </tr>
260 <tr class="gradeA">
261 <td class="left_cell"> </td>
262 <td>Gecko</td>
263 <td>Mozilla 1.4</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>
268 </tr>
269 <tr class="gradeA">
270 <td class="left_cell"> </td>
271 <td>Gecko</td>
272 <td>Mozilla 1.5</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>
277 </tr>
278 <tr class="gradeA">
279 <td class="left_cell"> </td>
280 <td>Gecko</td>
281 <td>Mozilla 1.6</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>
286 </tr>
287 <tr class="gradeA">
288 <td class="left_cell"> </td>
289 <td>Gecko</td>
290 <td>Mozilla 1.7</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>
295 </tr>
296 <tr class="gradeA">
297 <td class="left_cell"> </td>
298 <td>Gecko</td>
299 <td>Mozilla 1.8</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>
304 </tr>
305 <tr class="gradeA">
306 <td class="left_cell"> </td>
307 <td>Gecko</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>
313 </tr>
314 <tr class="gradeA">
315 <td class="left_cell"> </td>
316 <td>Gecko</td>
317 <td>Epiphany 2.20</td>
318 <td>Gnome</td>
319 <td class="center">1.8</td>
320 <td class="center">A</td>
321 <td class="right_cell"> </td>
322 </tr>
323 <tr class="gradeA">
324 <td class="left_cell"> </td>
325 <td>Webkit</td>
326 <td>Safari 1.2</td>
327 <td>OSX.3</td>
328 <td class="center">125.5</td>
329 <td class="center">A</td>
330 <td class="right_cell"> </td>
331 </tr>
332 <tr class="gradeA">
333 <td class="left_cell"> </td>
334 <td>Webkit</td>
335 <td>Safari 1.3</td>
336 <td>OSX.3</td>
337 <td class="center">312.8</td>
338 <td class="center">A</td>
339 <td class="right_cell"> </td>
340 </tr>
341 <tr class="gradeA">
342 <td class="left_cell"> </td>
343 <td>Webkit</td>
344 <td>Safari 2.0</td>
345 <td>OSX.4+</td>
346 <td class="center">419.3</td>
347 <td class="center">A</td>
348 <td class="right_cell"> </td>
349 </tr>
350 <tr class="gradeA">
351 <td class="left_cell"> </td>
352 <td>Webkit</td>
353 <td>Safari 3.0</td>
354 <td>OSX.4+</td>
355 <td class="center">522.1</td>
356 <td class="center">A</td>
357 <td class="right_cell"> </td>
358 </tr>
359 <tr class="gradeA">
360 <td class="left_cell"> </td>
361 <td>Webkit</td>
362 <td>OmniWeb 5.5</td>
363 <td>OSX.4+</td>
364 <td class="center">420</td>
365 <td class="center">A</td>
366 <td class="right_cell"> </td>
367 </tr>
368 <tr class="gradeA">
369 <td class="left_cell"> </td>
370 <td>Webkit</td>
371 <td>iPod Touch / iPhone</td>
372 <td>iPod</td>
373 <td class="center">420.1</td>
374 <td class="center">A</td>
375 <td class="right_cell"> </td>
376 </tr>
377 <tr class="gradeA">
378 <td class="left_cell"> </td>
379 <td>Webkit</td>
380 <td>S60</td>
381 <td>S60</td>
382 <td class="center">413</td>
383 <td class="center">A</td>
384 <td class="right_cell"> </td>
385 </tr>
386 <tr class="gradeA">
387 <td class="left_cell"> </td>
388 <td>Presto</td>
389 <td>Opera 7.0</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>
394 </tr>
395 <tr class="gradeA">
396 <td class="left_cell"> </td>
397 <td>Presto</td>
398 <td>Opera 7.5</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>
403 </tr>
404 <tr class="gradeA">
405 <td class="left_cell"> </td>
406 <td>Presto</td>
407 <td>Opera 8.0</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>
412 </tr>
413 <tr class="gradeA">
414 <td class="left_cell"> </td>
415 <td>Presto</td>
416 <td>Opera 8.5</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>
421 </tr>
422 <tr class="gradeA">
423 <td class="left_cell"> </td>
424 <td>Presto</td>
425 <td>Opera 9.0</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>
430 </tr>
431 <tr class="gradeA">
432 <td class="left_cell"> </td>
433 <td>Presto</td>
434 <td>Opera 9.2</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>
439 </tr>
440 <tr class="gradeA">
441 <td class="left_cell"> </td>
442 <td>Presto</td>
443 <td>Opera 9.5</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>
448 </tr>
449 <tr class="gradeA">
450 <td class="left_cell"> </td>
451 <td>Presto</td>
452 <td>Opera for Wii</td>
453 <td>Wii</td>
454 <td class="center">-</td>
455 <td class="center">A</td>
456 <td class="right_cell"> </td>
457 </tr>
458 <tr class="gradeA">
459 <td class="left_cell"> </td>
460 <td>Presto</td>
461 <td>Nokia N800</td>
462 <td>N800</td>
463 <td class="center">-</td>
464 <td class="center">A</td>
465 <td class="right_cell"> </td>
466 </tr>
467 <tr class="gradeA">
468 <td class="left_cell"> </td>
469 <td>Presto</td>
470 <td>Nintendo DS browser</td>
471 <td>Nintendo DS</td>
472 <td class="center">8.5</td>
473 <td class="center">C/A<sup>1</sup></td>
474 <td class="right_cell"> </td>
475 </tr>
476 <tr class="gradeC">
477 <td class="left_cell"> </td>
478 <td>KHTML</td>
479 <td>Konqureror 3.1</td>
480 <td>KDE 3.1</td>
481 <td class="center">3.1</td>
482 <td class="center">C</td>
483 <td class="right_cell"> </td>
484 </tr>
485 <tr class="gradeA">
486 <td class="left_cell"> </td>
487 <td>KHTML</td>
488 <td>Konqureror 3.3</td>
489 <td>KDE 3.3</td>
490 <td class="center">3.3</td>
491 <td class="center">A</td>
492 <td class="right_cell"> </td>
493 </tr>
494 <tr class="gradeA">
495 <td class="left_cell"> </td>
496 <td>KHTML</td>
497 <td>Konqureror 3.5</td>
498 <td>KDE 3.5</td>
499 <td class="center">3.5</td>
500 <td class="center">A</td>
501 <td class="right_cell"> </td>
502 </tr>
503 <tr class="gradeX">
504 <td class="left_cell"> </td>
505 <td>Tasman</td>
506 <td>Internet Explorer 4.5</td>
507 <td>Mac OS 8-9</td>
508 <td class="center">-</td>
509 <td class="center">X</td>
510 <td class="right_cell"> </td>
511 </tr>
512 <tr class="gradeC">
513 <td class="left_cell"> </td>
514 <td>Tasman</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>
520 </tr>
521 <tr class="gradeC">
522 <td class="left_cell"> </td>
523 <td>Tasman</td>
524 <td>Internet Explorer 5.2</td>
525 <td>Mac OS 8-X</td>
526 <td class="center">1</td>
527 <td class="center">C</td>
528 <td class="right_cell"> </td>
529 </tr>
530 <tr class="gradeA">
531 <td class="left_cell"> </td>
532 <td>Misc</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>
538 </tr>
539 <tr class="gradeA">
540 <td class="left_cell"> </td>
541 <td>Misc</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>
547 </tr>
548 <tr class="gradeX">
549 <td class="left_cell"> </td>
550 <td>Misc</td>
551 <td>Dillo 0.8</td>
552 <td>Embedded devices</td>
553 <td class="center">-</td>
554 <td class="center">X</td>
555 <td class="right_cell"> </td>
556 </tr>
557 <tr class="gradeX">
558 <td class="left_cell"> </td>
559 <td>Misc</td>
560 <td>Links</td>
561 <td>Text only</td>
562 <td class="center">-</td>
563 <td class="center">X</td>
564 <td class="right_cell"> </td>
565 </tr>
566 <tr class="gradeX">
567 <td class="left_cell"> </td>
568 <td>Misc</td>
569 <td>Lynx</td>
570 <td>Text only</td>
571 <td class="center">-</td>
572 <td class="center">X</td>
573 <td class="right_cell"> </td>
574 </tr>
575 <tr class="gradeC">
576 <td class="left_cell"> </td>
577 <td>Misc</td>
578 <td>IE Mobile</td>
579 <td>Windows Mobile 6</td>
580 <td class="center">-</td>
581 <td class="center">C</td>
582 <td class="right_cell"> </td>
583 </tr>
584 <tr class="gradeC">
585 <td class="left_cell"> </td>
586 <td>Misc</td>
587 <td>PSP browser</td>
588 <td>PSP</td>
589 <td class="center">-</td>
590 <td class="center">C</td>
591 <td class="right_cell"> </td>
592 </tr>
593 <tr class="gradeU">
594 <td class="left_cell"> </td>
595 <td>Other browsers</td>
596 <td>All others</td>
597 <td>-</td>
598 <td class="center">-</td>
599 <td class="center">U</td>
600 <td class="right_cell"> </td>
601 </tr>
602 </tbody>
603 <tfoot>
604 <tr>
605 <th></th>
606 <th>Rendering engine</th>
607 <th>Browser</th>
608 <th>Platform(s)</th>
609 <th>Engine version</th>
610 <th>CSS grade</th>
611 <th></th>
612 </tr>
613 </tfoot>
614 </table>
615 </div>
616 </body>
617 </html>