Altura de las columnas de la tabla HTML; Funciona en Firefox no en IE
https://stackoverflow.com/questions/250931
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo algunos HTML que se muestran bien en FireFox3 / Opera / Safari pero no con IE7. El fragmento es el siguiente:
<!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 segunda fila no llenará el espacio vertical creado por la columna central de las primeras filas (note que rowpan = " 2 ") correctamente. En su lugar, las primeras filas de la primera y la tercera columnas se expanden hacia abajo aunque yo establezca su altura en 37. La siguiente imagen muestra lo que sucede en IE7 y Firefox3 ...
EDITAR: agregó el tipo de documento HTML al fragmento de código. Se agregó una captura de pantalla.
Cualquier ayuda apreciada, gracias :)
Solución
¿Y si lo intentas así?
<!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>
Otros consejos
La respuesta correcta sería: no diseñe su página utilizando tablas.
La respuesta técnica sería: las celdas de su tabla están haciendo lo que deben hacer, es decir, no puede resolver su problema con la estructura de código que usa.
La respuesta intrépida sería: si las celdas de la izquierda y la derecha tienen exactamente 37px de altura, deberá agregar 2 tablas anidadas adicionales en la celda de la izquierda y la derecha.
No estoy muy seguro de por qué está sucediendo eso. ¿Qué diseño estás tratando de lograr, realmente necesita ser una mesa? No debe diseñar páginas con tablas, solo deben usarse para datos tabulares verdaderos.
¿Has considerado usar divs?
Lánzalo a través de un validador y estoy seguro de que estarás un poco más cerca.
En realidad, lo que estás viendo es un comportamiento normal para IE: agregar borde = " 1 " a tu mesa principal y te mostrará lo que está pasando un poco más claro.
