Sincronización del ancho de columna entre tablas en dos marcos diferentes, etc.

Question

Por razones que son algo inevitables (muchos códigos heredados, compatibilidad, necesidades de diseño) Tengo el siguiente problema: Tengo dos tablas, una directamente debajo de la otra , pero dividido entre dos cuadros (ver el pseudo-ejemplo debajo de mi firma). Necesito que el ancho de las columnas de estas tablas se sincronice exactamente para que estas dos tablas "actúen" como una. El motivo es tener una tabla de "encabezado" que no se desplazará por encima de una tabla de "datos" que puede desplazarse.

Ahora hay algunas sugerencias obvias que no (todavía) funcionan.

Primero, he escuchado que al usar CSS hay una manera de poner una barra de desplazamiento justo en las filas de la tabla, no en el encabezado de la tabla, que es el efecto deseado aquí. Lamentablemente, esta no es una opción viable debido a los motivos mencionados anteriormente.

Segundo, formato de ancho de porcentaje en las columnas. Desafortunadamente, la barra de desplazamiento lo estropeará y esta solución también comparte un problema con la siguiente solución posible: formato de ancho de píxel. Aquí, si hay contenido de columna que es extra ancho, estos anchos (px o%) se anularán en una tabla pero no en la otra, y un ancho no coincidente romperá todas las alineaciones verticales. Aparentemente, corregir esto con CSS 'max-width' no parece funcionar.

La última solución posible es utilizar algún tipo de Javascript y DOM para forzar dinámicamente el problema. Aquí sería suficiente forzar un ancho mínimo en cada columna y forzar anchos inferiores para anular los anchos superiores. Aún así, la capacidad de dividir realmente una tabla en dos mientras comparten el mismo modelo de columna/fila sería bastante ordenado. Afortunadamente, esta solución es factible y no extremadamente complicada (disculpe mi actual falta de conocimiento RE Javascript/DOM).

Gracias,

Skolem

<!-- In frame 1 (top, non-scrolling): --> 
<table id="t1" ...> (Just the header, really) 
    <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td> 
    </tr> 
</table> 

<!-- In frame 2 (bottom, scrolling): --> 
<!-- table "t2" intended to have equal column widths --> 
<table id="t2" ...> (Data below the header) 
    <tr> 
    <!-- Lots of crazy stuff of wildly varying widths --> 
    <td>...</td><td>...</td><td>...</td><td>...</td> 
    </tr> 
</table> 

Answer 1

primer lugar, establecer el ancho de la t1 a t2 de ancho. Luego, tome cada td desde t1 y configure su ancho de acuerdo con el ancho de las columnas de t2.

Pruebe esta prueba de concepto: http://jsfiddle.net/HqpGp/.

Necesitarás jQuery y lo modificarás para que funcione con marcos, pero creo que es un buen comienzo. Sin embargo, estoy bastante seguro de que la parte de JS podría escribirse de una manera más agradable.

Espero que ayude!

Answer 2

No pude obtener la respuesta aceptada para trabajar directamente, así que la modifiqué un poco, por si acaso no funciona para nadie más.

$('.table1 tr:eq(1) td').each(function (i) { 
       var _this = $(this); 
       $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width()); 
      });