En-tête figée : ok sous Firefox mais pas sous IE

14 juin 2007, 11:29

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>

14 juin 2007, 12:27

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 !!

14 juin 2007, 14:06

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 !!!

15 juin 2007, 14:45

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 !!!

En-tête figée : ok sous Firefox mais pas sous IE

Qui est en ligne