He estado probando algunas CSS para crear una tabla con cabecera fija, 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. He probado a usar id diferentes para las tablas anidadas, 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?

Gracias.

Con esto te refieres, a que la cabecera:

¿ aparezca en cada paginación?

¿ se mantenga en una posición fija mientras se hace scroll?

A que la cabecera se mantenga fija en una posición mientras se hace scroll. Con el código que estoy usando consigo, al menos en Firefox y en IE, que el encabezado efectivamente se quede fijo y que aparezca la barra de desplazamiento deseada, pero en Firefox 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.

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.

Este es el código de la tabla:

<div class="fixedHeaderTable">
<table border=1 cellpadding=0 cellspacing=0 width=100%>
<thead class="fixedHeaderTable">
<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>

Y éste el del css en su estado más reciente:

div.fixedHeaderTable {
         position: relative;
}


div.fixedHeaderTable table {
    width:100%;
    border-collapse: collapse;
    border-width: 1px;
    border-style:solid;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}


div.fixedHeaderTable thead {
    border-bottom-style:solid;
}


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

div.fixedHeaderTable table th {
    background-color:#CCCCCC;
    padding:5;
    border-bottom-style:solid;
}

div.fixedHeaderTable table tr {
}
  

div.fixedHeaderTable table td {
    padding-right:5;
    padding-left:5;

}

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

He probado a asignar otro div class a las tablas anidadas (entiéndase: <td><div class = TablaNormal>TABLA</div></td>). Esto me permite asignar un estilo independiente pero no controlar la altura de la tabla, que es lo que me está causando problemas. Lo sorprendente, es que en IE obtengo el aspecto deseado, pero no en Firefox.

A ver si alguien puede sugerirme algo.

Muchas gracias.

Juega con estos estilos y código HTML

table#conten{margin:o;padding:0;border:1px solid #333;}

table.anidada{margin:4px;border:1px solid #f00;}    /* esta tabla es libre */

table#conten table.anidada{border:1px solid #00f;}    /* esta tabla NO es libre */

<table class='anidada'><tr><td>libre</td></tr></table>

<table id='conten'><tr><td><table class='anidada'><tr><td>anidada</td></tr></table></td></tr></table>

Gracias, al final lo solucioné con un pequeño cambio de concepto del diseño y, aunque la estética no es la deseada, es más que aceptable para la función de la página web. Aun así, tomaré nota pues me temo que aunque la apariencia en Firefox e Internet Explorer es parecida, no sé por qué me da que Chrome va a hacer cosas raras...

Gracias de nuevo.

Aunque probar no mata a nadie, no creo que la diferencia se vuelva tan alta con Chrome, creo que se vera muy parecida a Firefox, el único que realmente se tira las cosas en la mayoría de los casos es IE(en especial IE6, por Dios dejen de usarlo y hagan un favor a ustedes y al mundo ).