Cabecera fija en tabla con tablas anidadas

[My_lady]

¡Buenas tardes!

He estado probando algunas CSS para crear una tabla con cabecera fija y barra de desplazamiento en el lateral, pero me encuentro con el siguiente problema: la tabla a la que quiero aplicar la CSS contiene varias tablas anidadas y, lo mismo que a la tabla contenedora, los estilos se me aplican a las tablas anidadas. Pensé que dotando de diferente div id y class (y sus estilos corresondientes) a las tablas anidadas bastaría, pero sin éxito. ¿Alguien sabe de un buen método para mantener fija la cabecera de una tabla en cuyo interior hay otras tablas anidadas?

Los estilos que he aplicado han sido los de http://www.locualo.net/programacion/como-crear-tabla-html-cabecera-fija-usando-solo-css/00000149.aspx (con éste el problema era que la altura de la tabla principal y la de la tabla anidada se igualaban, con lo que acababa teniendo filas que ocupaban todo el espacio visible de la tabla contenedora) y el de http://www.imaputz.com/cssStuff/bigFourVersion.html (aquí el ancho de la tabla anidad parecía corresponderse con el de la tabla contenedora, pero es que además no cargaba ninguna barra de desplazamiento).

Muchas gracias.

[C2am]

Y si simplemente le pones un div antes de la tabla y fuera de ella, con las caracteristicas que deseas?
En vez de mostrar los enlaces de donde sacas los ejemplos, mejor pon un enlace a tu página, o pega el codigo que usas en ella.
Saludos

[My_lady]

Tienes razón; aquí una versión reducida del código (es una tabla que recibe los datos por PHP, pero me limito al HTML como está ahora, aunque de manera esquemática):

Código:

<div class=fixedHeaderTable>
<table border=1 cellpadding=0 cellspacing=0 width=100%>
<thead class=fixedHeader>
<tr>
<th>ENCABEZADO1</th>
<th>ENCABEZADO2</th>
...
<th>ENCABEZADO9</th>
</tr>
</thead>

<tbody>
<tr>
<td>FILANORMAL1</td>
<td>FILANORMAL2</td>
<td>FILANORMAL3</td>
<td>FILANORMAL4</td>
<td>TABLA1(1COLUMNA)</td>
<td>TABLA2(1COLUMNA)</td>
<td>TABLA3(1COLUMNA)</td>
<td>FILANORMAL5</td>
<td>FILANORMAL6</td>
</tr>
</tbody>

</table>
</div>

En cuanto a la CSS, es muy sencillita, parece ser (omito los apaños para IE):

Código:

div.fixedHeaderTable {
     position: relative;
}

div.fixedHeaderTable table {
     width:100%;
}

div.fixedHeaderTable tbody {
     height: 400px;
     overflow-y: auto;
     overflow-x: hidden;
}

div.fixedHeaderTable thead td, div.fixedHeaderTable thead th {
     position:relative;
}

Con esto consigo que el encabezado efectivamente se quede fijo y que aparezca la barra de desplazamiento deseada, pero las tablas internas heredan la altura de la tabla contenedora, y lo que quiero es que tengan la altura bien de la fila en que están insertadas, bien la necesaria para que muestren su contenido sin necesidad de desplazamiento. Para intentar solucionarlo he probado lo siguiente:

1º Asignar otro div class a las tablas anidadas (entiéndase: <td><div class = TablaNormal>TABLA</div></td>). Me permite asignar un estilo independiente pero no controlar la altura de la tabla, que es lo que me está causando problemas.

2º Cerrar la etiqueta div antes de insertar las tablas (infructuoso)

3º El código de http://www.imaputz.com/cssStuff/bigFourVersion.html, pero éste es mucho más complicado para mí, el problema sólo se me desplaza al ancho de las tablas anidadas, y además me conviene no tener que definir independientemente el ancho de las columnas, pues el número de columnas en la tabla puede variar.

Espero esto sirva para exponer más claramente mi problema.

Muchas gracias.

[My_lady]

Lo que supongo que está pasando, y por lo que mi método no funciona, es lo siguiente:

Al crear la tabla, doy un formato a las tablas anidadas llamado TablaNormal y se aplica correctamente. Pero por encima, en la tabla contenedora, tiene el formato fixedHeaderTable, que vuelve a dar formato a todas las etiquetas de HTML, por lo que anula los estilos de TablaNormal en aquellos casos en que definen una misma etiqueta de HTML, y se impone.

La cosa sería que el formato TablaNormal fuera intocable, o poder aplicarlos en el orden inverso, creo yo; pero no sé cómo se hace. O a lo mejor se pueden tratar como objetos independiente, ¿serviría de algo sustituir las clases por id únicos?

Gracias.

[My_lady]

Solamente quería añadir que en IE la tabla sale exactamente como quiero (incluso en la parte estética, que me está dando algunos problemas también de descuadre de las cosas y desaparición súbita de líneas). El problema lo tengo con Firefox.

Gracias.

[C2am]

Yo lo estuve viendo en chrome y con lo que muestras no puedo hacer que la cabecera quede fija.
Falta algo y además en <thead class=fixedHeader> no muestra esa clase o es en realidad :
¿<thead class=fixedHeaderTable>?

[My_lady]

No he probado en Chrome, pero en Firefox y en IE la cabecera sí se queda fija; el problema lo tengo con las tablas anidadas. Y sí, <thead class=fixedHeader> es en realidad <thead class=fixedHeaderTable>; un lapsus al borrar los datos del código.

Así es como se ve en IE (ignorar los defectos de diseño; barra de desplazamiento desplazada y líneas que no coinciden incluidas):

Así es como se ve en Firefox:

Una fila de IE me ocupa toda la tabla en Firefox, haciendo muy incómodo trabajar con la tabla. Además, en Firefox no consigo colocar la línea inferior de las filas para dar una idea de separación, pero ahora mismo ésa no es mi prioridad.

Llevo todo el día con esto y no consigo arreglarlo ni he sido capaz de encontrar ni modelos ni solución en internet. Así que creo que por hoy lo dejo pero, por favor, si alguien tiene idea de cómo podría solucionarlo, le agradecería mucho el consejo.

Gracias.

[My_lady]

Rescato el tema porque no he avanzado nada hacia su solución. Creo que la única opción es cambiar completamente de concepto de tabla pero ¿es posible mantener fija la cabecera sin recurrir al sistema de [URL="http://www.imaputz.com/cssStuff/bigFourVersion.html"]asignar independientemente el tamaño de cada columna[/URL]? ¿Alguna recomendación?

[My_lady]

Al final he logrado que funcione saltándome un poco el diseño inicial y jugando con las id.

Gracias.