HTML Table column height; Fonctionne dans Firefox pas dans IE
https://stackoverflow.com/questions/250931
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai un code HTML qui s’affiche correctement sur FireFox3 / Opera / Safari mais pas avec IE7. L'extrait est le suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body bgcolor="#AA5566" >
<table width="100%">
<tr>
<td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>
<td width="600" rowspan="2" >
<table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
</td>
<td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>
</tr>
<!-- This row doesnt fill the vertical space on IE7 //-->
<tr>
<td valign="top" bgcolor="#112233"> </td>
<td valign="top" bgcolor="#112233"> </td>
</tr>
</table>
</body>
La deuxième ligne ne remplira pas l’espace vertical créé par la première colonne du milieu (notez correctement rowspan = "2"). Au lieu de cela, les premières rangées des 1ère et 3ème colonnes sont réduites, même si je règle leur hauteur à 37. L'image ci-dessous montre ce qui se passe dans IE7 et Firefox3 ...
EDIT: ajout du type de document HTML à l’extrait de code. Ajout d'une capture d'écran.
Toute aide appréciée, merci:)
La solution
Et si vous l'essayiez comme ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body bgcolor="#AA5566" >
<table width="100%" border='1'>
<tr>
<td valign="top">
<table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
<td width="600" rowspan="2" >
<table width="600" height="800"><tr><td>asdf</td></tr></table>
</td>
<td valign="top">
<table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
</tr>
</table>
</body>
Autres conseils
La bonne réponse serait: ne mettez pas votre page en page avec des tableaux.
La réponse technique serait: vos cellules de tableau font ce qu’elles sont censées faire, c’est-à-dire que vous ne pouvez pas résoudre votre problème avec la structure de code que vous utilisez.
La réponse hacky serait la suivante: si les cellules à gauche et à droite ont exactement 37 pixels de haut, vous devrez ajouter 2 tableaux imbriqués supplémentaires dans les cellules gauche et droite.
Je ne sais pas trop pourquoi cela se produit. Quelle disposition essayez-vous de réaliser, faut-il vraiment une table? Ne mettez pas en page les pages contenant des tableaux, elles ne doivent être utilisées que pour les vraies données tabulaires.
Avez-vous envisagé d'utiliser des divs?
Passez à travers un validateur et je suis sûr que vous vous rapprocherez un peu plus.
En fait, ce que vous constatez est un comportement normal pour IE: ajoutez une bordure = "1". à votre table principale et ça va vous montrer ce qui se passe un peu plus clair.
