Diseño de tabla incorrecto en IE (7)

StackOverflow https://stackoverflow.com/questions/197266

Pregunta

A continuación se muestra el código de un html simple con un diseño de tabla. En FF se ve como creo que debería ser, en IE7 no lo hace. ¿Qué estoy haciendo mal?

¿Y cómo puedo solucionarlo? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
¿Fue útil?

Solución

Supongo que se está quejando de la altura mínima de la fila del medio (la que contiene solo celdas en filas) y la altura ampliada de las filas adyacentes para compensar, dejando espacios entre los divs.

IE no puede calcular las alturas de fila óptimas cuando la fila contiene solo celdas con filas de filas. La solución habitual cuando no puede reiniciarlo para deshacerse de la fila de filas es agregar una columna 'ficticia' de 1px a un lado de la tabla, que contiene celdas vacías, cada una con la 'altura' configurada para qué tan alta debe ser la fila.

Pero sí, dependiendo de lo que planeas hacer con esto, un diseño CSS puede ser más apropiado. Si realmente es un diseño de píxeles fijos para todo como este ejemplo, el posicionamiento absoluto para cada div será mucho, mucho más fácil.

Otros bits: los valores de ancho / alto de CSS requieren unidades (presumiblemente 'px'); valign / cellpacing / etc. se puede hacer más fácilmente en una hoja de estilo, incluso si está utilizando diseños de tabla; un DOCTYPE en modo estándar puede evitar algunos de los peores errores de IE (aunque no este antiguo, no relacionado con CSS).

Otros consejos

Para empezar, sus valores CSS deberían tener unidades, p. width: 190; debe ser width: 190px;

completamente de acuerdo, puede echar un vistazo a Blueprint CSS u otros marcos CSS para obtener ayuda

A primera vista parece que IE7 tiene algún soporte roto para este tipo de formato. Al principio iba a proponer deshacerme de los divs y mover el formato (ancho y alto) directamente en el TD, pero lo intenté y parece que no resuelve el problema.

Supongo que esta no es una buena solución, pero ¿sería posible reemplazar las celdas de la hilera con más celdas con un borde invisible entre ellas? Sin embargo, esta solución falla si el texto es más grande que el tamaño de la celda superior.

La elección de Doctype (4.01 Transitional sin identificador de sistema (url)) activa el modo Quirks en IE, lo que lo hace altamente inconsistente con otros navegadores.

Cambiar a: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

O al menos: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(y, por supuesto, validar pero el HTML y CSS (que elegiría las unidades que faltan en sus valores de longitud)).

Definitivamente deberías usar CSS. Las tablas NUNCA deben usarse para el diseño.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top