table entête fixe corps scrollable
Bonsoir,
j'ai un gros souci avec mon code, j'ai passé la journée dessus et je n'ai toujours pas trouvé ou ca coince. En fait le but est de faire une table avec une entete fixe et un tbody qui possede un scroll.
Mon code fonctionne tres bien sous fireFox mais sous IE je ne vois pas les lignes du Tbody. Je ne comprend.
J'ai adapté mon code pour pouvoir le placer sur le post mais a voir comme ca, je vous comprendrez et vous me disiez, que ca ne sert a rien. Mais dans le contexte OUI.
ouvrez le code sous fireFox et vous verrey l'intitulé de la colonne et la ligne dessous
ouvrez maintenant sous IE et vous ne verrez que l'intitulé de la colonne. pourquoi ?
Code:
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
|
<html>
<head>
<script type="text/javaScript" src="prototype/dist/prototype.js"></script>
<script type="text/javaScript">
function construireTable() {
var body = document.getElementsByTagName("body")[0];
var fragment = document.createDocumentFragment();
var premierContainer = document.createElement("div");
Element.addClassName(premierContainer,"compTable");
fragment.appendChild(premierContainer);
var tableEntete = document.createElement("table");
Element.addClassName(tableEntete,"entete")
premierContainer.appendChild(tableEntete);
var thead = document.createElement("thead");
tableEntete.appendChild(thead);
var tr = document.createElement("tr");
thead.appendChild(tr);
var th = document.createElement("th");
tr.appendChild(th);
var titre = document.createElement("label");
var texte = document.createTextNode("test");
titre.appendChild(texte);
th.appendChild(titre);
//ajout de la balise Tbody pour le corps de la table
var tbody = document.createElement("tbody");
tableEntete.appendChild(tbody);
var trBody = document.createElement("tr");
tbody.appendChild(trBody);
var tdBody = document.createElement("td");
tdBody.setAttribute("colSpan","1");
trBody.appendChild(tdBody);
var divBody = document.createElement("div");
tdBody.appendChild(divBody);
var tableBody = document.createElement("table");
var trt = document.createElement("tr");
var tdr = document.createElement("td");
var texter = document.createTextNode("tttttttttttt");
tdr.appendChild(texter);
trt.appendChild(tdr);
tableBody.appendChild(trt);
divBody.appendChild(tableBody);
body.appendChild(fragment);
}
</script>
<style>
.compTable table{
border: 2px solid #3399CC;
border-collapse: collapse;
}
.compTable th{
border-bottom: 2px solid #3399CC;
}
.compTable td{
border-right: 1px solid #3399CC;
border-left: 1px solid #3399CC;
border-top: 1px dotted #3399CC;
border-bottom: 1px dotted #3399CC;
}
.compTable .entete {
margin:0 auto;
border-collapse:collapse;
}
.compTable .tableBody {
border-collapse:collapse;
}
.innerBody {
overflow:auto;
}
</style>
</head>
<body onload="construireTable();">
<div id="TableUtilisateur"></div>
</body>
</html> |
