¿Cómo se mantienen sincronizadas las anchuras de columna de dos tablas al networkingimensionar?

He mirado un poco y parece que no puedo encontrar una solución decente, que no requiera un javascript loco, para el siguiente problema.

Hay dos tablas separadas en el ejemplo. El primero es solo para los encabezados. El segundo es para el cuerpo. Necesitamos dos tablas porque el requisito para esta característica es que la tabla del cuerpo sea desplazable localmente, lo que significa que los encabezados deben permanecer visibles a medida que se desplaza el cuerpo de la tabla. No podemos usar nuevas tablas dinámicas de HTML 5 porque tenemos que admitir IE.

¿Hay alguna manera de lograr esto con CSS puro? No tiene que ser perfecto, siempre que se vea decente, eso es todo lo que necesito.

Cualquier ayuda es apreciada.

Definitivamente factible en solo CSS. Simplemente configure los anchos en tablas, trs y tds, aplique el ajuste de palabras y establezca table-layout en fixed. Esta última configuration hace que use los anchos de columna definidos, en lugar de estar determinada por el ancho del contenido de la celda.

#tb1 { width: 80%; } #tb2 { width: 80%; } #tb1 tr { width: 100%; } #tb2 tr { width: 100%; } .col1 { width: 35%; } .col2 { width: 35%; } .col3 { width: 20%; } .col4 { width: 10%; } #tb1, #tb2 { table-layout: fixed; } #tb1 td, #tb2 td { word-wrap: break-word; } 
 <table id="tb1" border="1"> <tr> <td class="col1">Title 1</td> <td class="col2">Title 2</td> <td class="col3">Title 3</td> <td class="col4">Title 4</td> </tr> </table> <table id="tb2" border="1"> <tr> <td class="col1">Content 00001</td> <td class="col2">Content 02</td> <td class="col3">Content 0000000000003</td> <td class="col4">Content 000000000000000000004</td> </tr> </table> 

Esta es una muestra del concepto, usando Jquery. (Puedes hacerlo vainilla, pero requiere más código)

 <table id="tb1" border="1"> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> <td>Title 4</td> </tr> </table> <table id="tb2" border="1"> <tr> <td>Content 00001</td> <td>Content 02</td> <td>Content 0000000000003</td> <td>Content 000000000000000000004</td> </tr> </table> 

JS:

 function SetSize() { var i = 0; $("#tb2 tr").first().find("td").each(function() { $($("#tb1 tr").first().find("td")[i]).width( $(this).width() ); i++; }); } $(window).resize(SetSize); SetSize(); 

Sin "javascript loco": D
Aquí hay un violín que funciona, con algunos css para que se vea mejor: http://jsfiddle.net/5mfVT/

Las tablas cambian de tamaño lo más pequeño posible. La tabla de encabezados tiene un contenido más limitado y, por lo tanto, puede networkingimensionarse a anchuras más pequeñas antes de aprovechar para cambiar el tamaño.
Una solución que no sea Javascript es definir anchos para todas sus columnas o definir una propiedad de min-width sus tablas que se ajuste a la mayor de las dos anchuras mínimas.