Ik ben bezig met een snippet die het mogelijk moet maken om een table te krijgen met een vaste header en een scrollende body. Het geheel is opgebouwd uit 2 tables, waarbij de 1ste table de header is, en de 2de table de scrollbare body is.
In de 1ste table, geef ik doormiddel van een attribuut "datatable" in de table tag aan, welke table moet fungeren als de body.
Op window.onload doe ik een aanroep van de functie initResize(). Deze zet initieel widths voor zowel de body als de header. De body is momenteel leidend, een brede cell, betekend een evenzo brede head cell. Dit wordt in de toekomst nog beperkt, omdat een head ook een minimale breedte moet krijgen, nl zijn offsetWidth.
Bij het zetten van de widths op de cellen, wordt eerst berekend wat het verschil in offsetWidth tussen de head table, en de body table is. Dit omdat in de body table minder breedte beschikbaar kan zijn door een scrollbar van de <div> eromheen.
Bij het toekennen van de width van de laatste cell in de head wordt dit verschil erbij geteld.
Ik heb tevens een trace gemaakt van wat de uiteindelijk waardes na het toekennen nou zijn geworden. Het valt me op dat deze initieel verschillen tussen de thead en de tbody, maar ik snap nou niet echt waarom, ik vermoed dat het te maken heeft met het on the fly renderen van de browser?
Hieronder de code, het is nog niet getest op browsers anders dan MSIE 6
In de 1ste table, geef ik doormiddel van een attribuut "datatable" in de table tag aan, welke table moet fungeren als de body.
Op window.onload doe ik een aanroep van de functie initResize(). Deze zet initieel widths voor zowel de body als de header. De body is momenteel leidend, een brede cell, betekend een evenzo brede head cell. Dit wordt in de toekomst nog beperkt, omdat een head ook een minimale breedte moet krijgen, nl zijn offsetWidth.
Bij het zetten van de widths op de cellen, wordt eerst berekend wat het verschil in offsetWidth tussen de head table, en de body table is. Dit omdat in de body table minder breedte beschikbaar kan zijn door een scrollbar van de <div> eromheen.
Bij het toekennen van de width van de laatste cell in de head wordt dit verschil erbij geteld.
Ik heb tevens een trace gemaakt van wat de uiteindelijk waardes na het toekennen nou zijn geworden. Het valt me op dat deze initieel verschillen tussen de thead en de tbody, maar ik snap nou niet echt waarom, ik vermoed dat het te maken heeft met het on the fly renderen van de browser?
Hieronder de code, het is nog niet getest op browsers anders dan MSIE 6
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> td{ font:icon; } thead td { background:buttonface; border:1px outset; height:20px; } tbody td { overflow:hidden; border:1px outset; } </style> <script type="text/javascript"> function initResize(){ theadCollection = document.getElementsByTagName('THEAD'); // loop through all theads for(rows=0;rows<theadCollection.length;rows++){ // get table tag thisTable = theadCollection[rows]; while (thisTable.tagName != "TABLE"){ thisTable = thisTable.parentElement; } dataTable = document.getElementById(thisTable.datatable); // get tbody in connected table for(i=0;i<dataTable.children.length;i++){ if(dataTable.children(i).tagName == "TBODY"){ thisTbody = dataTable.children(i); } } // get difference between thead and tbody width (scrollbar) difference = theadCollection[rows].offsetWidth - thisTbody.offsetWidth; for(columns=0;columns<theadCollection[rows].rows[0].cells.length;columns++){ // set initial tbody width values thisTbody.rows[0].cells[columns].style.width = thisTbody.rows[0].cells[columns].offsetWidth; // last thead cell gets difference extra if(theadCollection[rows].rows[0].cells.length-1 == columns){ theadCollection[rows].rows[0].cells[columns].style.width = thisTbody.rows[0].cells[columns].offsetWidth + difference; }else{ theadCollection[rows].rows[0].cells[columns].style.width = thisTbody.rows[0].cells[columns].offsetWidth; } } debuginfo = ''; for(i=0;i<theadCollection[rows].rows[0].cells.length;i++){ debuginfo += 'cellIndex:'+i+' head:'+theadCollection[rows].rows[0].cells[i].style.width+' body:'+thisTbody.children[0].children[i].style.width+'<br>'; } document.getElementById('trace').innerHTML = debuginfo; } } window.onload = initResize; </script> </head> <body> <div id="trace" style="position:absolute;bottom:450;right:10;"></div> <table cellspacing="0" cellpadding="0" datatable="body" width="100%"> <thead> <tr> <td>First Name</td> <td>Last Name</td> <td>Gender</td> <td>Mustage</td> <td>Smells</td> <td>Tijd</td> </tr> </thead> </table> <div style="width:100%;height:50;overflow:scroll;"> <table cellspacing="0" cellpadding="0" id="body" width="100%"> <tbody> <tr> <td>a</td> <td>Schumacher</td> <td>Ferrari</td> <td>Ferrari</td> <td>650 kb</td> <td>1.15.872</td> </tr> <tr> <td>b</td> <td>Schumacher</td> <td>Ferrari</td> <td>Ferrari</td> <td>650 kb</td> <td>1.15.872</td> </tr> <tr> <td>c</td> <td>Schumacher</td> <td>Ferrari</td> <td>Ferrari</td> <td>650 kb</td> <td>1.15.872</td> </tr> </tbody> </table> </div> </body> </html> |
/u/7685/ruinmytune-60x60.png?f=community)