Page 1 sur 1
En-tête figée : ok sous Firefox mais pas sous IE
Posté : 14 juin 2007, 11:29
par Invité
Bonjour à tous,
j'ai un petit problème qui m'embête beaucoup !!!
J'ai réussi à me dégotter un Script CSS qui me fige m'ont entête de tableau ....
Le problème est que ça fonctionne sous Firefox mais pas sous IE !!
Code : Tout sélectionner
<html>
<head><title>Page de test pour figer les entêtes</title></head>
<style type="text/css">
table { width: 20em; border-collapse: separate; border-spacing: 0; }
tbody { height: 10em; overflow-x: hidden; overflow-y: auto; }
td {border-left: 1px solid blue; border-bottom: 1px solid blue;}
</style>
<body>
<table>
<thead bgcolor='#D0CCEA'>
<tr>
<th>Entête</th>
<th>Entête</th>
<th>Entête</th>
</tr>
</thead>
<tbody>
<tr bgcolor='#F2F2F2'><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr bgcolor='#FFFFFF'><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr bgcolor='#F2F2F2'><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr bgcolor='#FFFFFF'><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr bgcolor='#F2F2F2'><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr bgcolor='#FFFFFF'><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
<tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
</tbody>
</table>
</body>
</html>
Posté : 14 juin 2007, 12:27
par Ish
Je viens de voir que le problème venait du over-flow-x .... il ne connait pas sous IE !!
Est-ce que quelqu'un aurait une réponse !!
merci beaucoup !!
Posté : 14 juin 2007, 14:06
par Ish
J'ai fait des recherches sous Google et tous les sites me disent que Overflow-x/y est compatible avec IE 5+ (je suis sous IE 6) ...
Je ne comprend pas c'est à devenir fou !!!
Posté : 15 juin 2007, 14:45
par Ish
Bon bah c'est pas glorieux mais j'ai réussi à faire quelque chose de propre et qui marche sur les deux navigateurs !!!
Code : Tout sélectionner
<html>
<head>
</head>
<body>
<div style="border:solid 1px #000000;width:200px;">
<table style="width:200px;"><colgroup> <col width="50%"/><col width="50%"/></colgroup>
<tr style="background-color:#C0C0C0;">
<th style="border:solid 1px #000000;">titi</th>
<th style="border:solid 1px #000000;">toto</th>
</tr>
</table>
</div>
<div style="overflow:auto;height:100px;border:solid 1px #000000;width:220px;">
<table style="width:200px;">
<colgroup><col width="50%"/><col width="50%"/></colgroup>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
<tr>
<td style="text-align:center;border:solid 1px #000000;">c titi</td>
<td style="text-align:center;border:solid 1px #000000;">c toto</td>
</tr>
</table>
</div>
</body>
</html>
ca peut toujours reservir !!!
