¡IE7 está haciendo mi vida miserable! Obtener espacios entre las columnas de la tabla html (w/colspan) con css alternar

Copie/pegue este fragmento de código html y pruébelo en IE7. Cuando alternas las columnas ocultas, deja un espacio entre las columnas. En Firefox funciona bien, las columnas se tocan cuando se minimizan. Todavía no he probado IE8, sería curioso escuchar cómo funciona allí. ¿Algunas ideas? He intentado un montón de cosas en el CSS como el diseño de la mesa: arreglado pero sin suerte.¡IE7 está haciendo mi vida miserable! Obtener espacios entre las columnas de la tabla html (w/colspan) con css alternar

Nota: No busco un método de alternar diferente porque la tabla con la que realmente estoy tratando tiene más de 50 columnas de ancho y más de 4000 filas, por lo que las técnicas de bucle/jquery son demasiado lentas.

Aquí está el código: si alguien puede volver a publicar una versión de trabajo, ¡instantáneamente le daré el cheque y siempre estaré en deuda con usted!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<script> 
function toggle() { 
    var tableobj = document.getElementById("mytable"); 
    if (tableobj.className == "") { 
     tableobj.className = "hide1 hide2"; 
    } 
    else { 
     tableobj.className = ""; 
    } 
} 
</script> 
<style> 
    table { border-collapse: collapse; } 
    td, th { border: 1px solid silver; } 
    .hide1 .col1 { display: none; } 
    .hide2 .col2 { display: none; } 
</style> 
</head> 
<body> 
<input type="button" value="toggle" onclick="toggle();" /> 
<table id="mytable"> 
<tr> 
    <th>A</th> 
    <th colspan="2">B</th> 
    <th colspan="2" class="col1">B1</th> 
    <th colspan="2">C</th> 
    <th colspan="2" class="col2">C1</th> 
</tr> 
<tr> 
    <td>123</td> 
    <td>456</td> 
    <td>789</td> 
    <td class="col1">123</td> 
    <td class="col1">456</td> 
    <td>789</td> 
    <td>123</td> 
    <td class="col2">456</td> 
    <td class="col2">789</td> 
</tr> 
</table> 
</body> 
</html>

Fuente

2010-05-20 Art Peterson

Los navegadores tienen diferentes modelos de cajas. Por lo tanto, causar efectos ligeramente diferentes en los navegadores, ver (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) IE está sosteniendo el tamaño del elemento "oculto" por el texto dentro de él. – Sphvn

@Ozaki - ¿Alguna idea de cómo evitar que esto ocurra en mi caso? Nunca me he encontrado con este problema con las tablas, espero que haya una manera de resolverlo. –

@Ozaki: los navegadores NO tienen modelos de caja diferentes si usa el mismo tipo de documento pero el modelo utilizado depende del tipo de documento utilizado. – Rob

Aquí hay una solución que usa JQuery para alternar los encabezados de las columnas (ver mi otra respuesta para la justificación). Además de las cosas de JQuery, el resto de la página html es la misma.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  

<script> 
function toggle() { 
    var tableobj = document.getElementById("mytable"); 
    if (tableobj.className == "") { 
     tableobj.className = "hide1 hide2"; 
     $('th[class^=col]').hide(); 
    } 
    else { 
     tableobj.className = ""; 
     $('th[class^=col]').show(); 
    } 
} 
</script> 
<style> 
    table { border-collapse: collapse; } 
    td, th { border: 1px solid silver; } 
    .hide1 .col1 { display: none; } 
    .hide2 .col2 { display: none; } 
</style> 
</head> 
<body> 
<input type="button" value="toggle" onclick="toggle();" /> 
<table id="mytable"> 
<tr> 
    <th>A</th> 
    <th colspan="2">B</th> 
    <th colspan="2" class="col1">B1</th> 
    <th colspan="2">C</th> 
    <th colspan="2" class="col2">C1</th> 
</tr> 
<tr> 
    <td>123</td> 
    <td>456</td> 
    <td>789</td> 
    <td class="col1">123</td> 
    <td class="col1">456</td> 
    <td>789</td> 
    <td>123</td> 
    <td class="col2">456</td> 
    <td class="col2">789</td> 
</tr> 
</table> 
</body> 
</html>

Fuente

2010-05-20 04:47:34 jdigital

Guau, ¡esto parece muy prometedor! Probarlo te responderá. –

Esto definitivamente soluciona el problema, y como solo tiene que recorrer los TH, no hay desaceleración. Eres increíble, gracias, ¡gracias, gracias! –

Me alegro de que esto haya funcionado para usted. Llegué a la conclusión de que esto es un error en IE7. Si hay problemas de rendimiento, incluso un ligero retraso en una máquina lenta, es posible que desee condicionalizar las llamadas jquery para que solo se utilicen si es necesario. – jdigital

Prueba esta declaración DOCTYPE:

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

Fuente

2010-05-20 02:18:28 edl

¿Cómo haría eso la diferencia? Su doctype está completamente bien. ¿Por qué cambiar de HTML a XHTML? – BalusC

Lo siento. editado Si tienes un doctype declarado incorrectamente, IE entra en modo peculiar creo. – edl

Gracias por captar eso, dejé fuera el "!" en el doctype. Se agregó pero no hizo diferencia. –

todavía no tenemos una explicación de por qué IE está haciendo esto, pero esto es lo que está pasando y aquí está la manera de trabajar alrededor de ella.

1) Si configura la clase de tabla como 'hide1 hide2' en el html, la tabla se procesará correctamente (sin espacio). Por lo tanto, el problema parece estar relacionado con la forma en que IE maneja los cambios en una tabla a través de los estilos.

2) El espacio entre las columnas es el ancho del encabezado de la columna distribuida.

3) Si elimina la columna que abarca (y las columnas adicionales), entonces todo funciona bien.

He encontrado dos soluciones. La primera es usar código para alternar la pantalla, pero has rechazado esa opción.

La alternativa es eliminar las colspans. Hay una variedad de formas de hacerlo. Una es convertir el grupo de celdas para incluirlas en una tabla incrustada (es decir, en lugar de dos elementos TD, tendrá un TD que contiene una TABLA con un TR y dos TD). O puede usar SPANs para obtener un código más limpio (con, por ejemplo, un BORDER-RIGHT para todas las celdas, pero el último).

Fuente

2010-05-20 03:27:08 jdigital

La eliminación de colspans no es una buena solución porque el ancho de los SPAN o los TDs en la TABLE incrustada variará según el valor de la celda, por lo que el borde no se alineará hacia abajo como una tabla. ¿Qué quiere decir con el uso del código para alternar la visualización? Rechacé una implementación en particular porque era significativamente más lenta, pero tal vez hay una manera que dará resultados similares a este método? –

Gracias por el intento, eso solo funciona en una fila. Como ya mencioné, intente agregar algunas filas de datos de TR con valores de longitud variables en los TD y ver cómo la línea de borde no se alinea en la página. –

Para hacer esto en código, guarde lo que ya tiene, y luego aumente la función de alternar para recorrer todos los elementos TH que desee ocultar y establecer explícitamente su estilo.display en 'ninguno' (o en una cadena vacía cuando lo desee para hacer las columnas visibles de nuevo). La buena noticia es que solo necesita hacer las células TH, no los TD, por lo que esto podría ser lo suficientemente eficiente. – jdigital

¡IE7 está haciendo mi vida miserable! Obtener espacios entre las columnas de la tabla html (w/colspan) con css alternar

Respuesta

Cuestiones relacionadas