Por la calle de la amargura, tablas y anchos

[Wolfchamane]

Tengo dos tablas, separadas.
Una hace de tabla cabecera con unos estilos (fondo, grosor de letras, etc.) diferente a la tabla cuerpo.
Esta segunda además esta encapsulada en un <DIV> para poder hacer un scroll de la misma sin perder la tabla cabecera.

Digamos que el código HTML es algo así:

Código HTML:

<table id="headerTable">
  <tr>
    <td>..cabecera..</td>
    <td>..cabecera..</td>
    <td>..cabecera..</td>
  </tr>
</table>
<div style="overflow:hidden;overflow-y:auto;height:200px;">
  <table id="bodyTable">
    <tr>
      <td>..dato..</td>
      <td>..dato..</td>
      <td>..dato..</td>
    </tr>
  </table>
</div>
 

Bien, y tengo un código JS que ajusta en cada momento el ancho de la tabla cabecera con el ancho de la tabla scrollable:

Código Javascript:

$(window).resize(function(){
  $('#headerTable').width($('#bodyTable').width());
});
 

Perfecto.

He decir que cada <TD> adquiere un ancho % diferente, ya que en principio representan datos diferentes de longitud variable, así un <TD> tiene un ancho de 2%, otro de 6%, etc. En total son 13 <TD>

Cuándo la ventana se expande y se contrae ambas tablas se comportan bien hasta qué en un punto determinado una de las celdas pierde el ancho % asignado, y empieza a descuadrarse el ajuste entre tablas.

Había pensado en ajustar el ancho mínimo de cada celda por separado, pero no se puede hacer por JS de forma dinámica.

¿No queda otra solución que ir celda a celda calculando el ancho mínimo?

[furoya]

Es una ruta muy transitada, Wolfchamane. Ya lo hablamos por aquí miles de veces.
Y en tu caso es fácil, porque como es solamente la cabecera de columnas, se pone con CSS.

Si vas a usar porcentajes igualados, tenés que darle un ancho mínimo a las celdas. El mismo para la columna y su encabezado. De otra forma se ajusta el texto en una y la otra no lo sigue. Ese ancho deberías ser mayor que la palabra más larga.
Y se calcula a ojímetro.

Hacé una búsqueda en el Foro a través de Google para más opciones

site:www.forosdelweb.com scroll tabla cabecera tbody

Ya que estoy, te ahorro trabajo y dejo una escogida

tbody con scroll?

[Wolfchamane]

Gracias furoya, pero he encontrado una solución mejor.

Basta con:

Código CSS:

table{table-layout:fixed;}
 

[furoya]

Digamos que esa no es una solución. A vos te sirve (¿te sirve?) porque iguala los anchos de celda ignorando el tamaño del contenido, entonces no se te "desarma" el falso encolumnado. Pero la idea general es que el contenido se reparta y cada columna de la misma tabla tome el ancho de la celda más ancha.
Lo que no podés hacer nunca con table{table-layout:fixed;} es que anchos leídos de una tabla se pasen a otra, que estás usando para simular una cabecera.
Lo que hay que hacer es usar una sola tabla, y que el th quede fuera del tbody, que es el que va a tener la barra de desplazamiento.

http://www.w3.org/TR/CSS21/tables.ht...d-table-layout

[Wolfchamane]

Iniciado por furoya

Digamos que esa no es una solución. A vos te sirve (¿te sirve?) porque iguala los anchos de celda ignorando el tamaño del contenido, entonces no se te "desarma" el falso encolumnado. Pero la idea general es que el contenido se reparta y cada columna de la misma tabla tome el ancho de la celda más ancha.
Lo que no podés hacer nunca con table{table-layout:fixed;} es que anchos leídos de una tabla se pasen a otra, que estás usando para simular una cabecera.
Lo que hay que hacer es usar una sola tabla, y que el th quede fuera del tbody, que es el que va a tener la barra de desplazamiento.

http://www.w3.org/TR/CSS21/tables.ht...d-table-layout

Sí, funciona.
Y lo hace porque el ancho de las columnas de ambas tablas no depende de su contenido. Al menos en mi caso.

[furoya]

Por eso valía la aclaración. Tu caso es más o menos el mismo que ponerle ancho declarado a cada celda, y el problema aparece cuando el contenido no cabe.

Quiero mencionar que el ejemplo que enlacé tampoco se ajusta automáticamente como debiera hacer una tabla, pero al menos es todo CSS. Medio reprobable para algún purista, pero es lo que hay hasta que se estandarice lo de poner con position:fixed un encabezado, y que siga manteniendo la relación de tamaños entre celdas.