Foros del Web - tabla con primera fila fija ?

Foros del Web (http://www.forosdelweb.com/)

- HTML (http://www.forosdelweb.com/f4/)

- - tabla con primera fila fija ? (http://www.forosdelweb.com/f4/tabla-con-primera-fila-fija-363105/)

tabla con primera fila fija ?

buenas,

tengo que mostrar datos en una tabla, pero los títulos (primera fila) quiero que permanezcan siempre visibles.

De momento la solución que he encontrado es en la página principal poner una tabla con sólo los encabezados, y en un IFRAME justo debajo la tabla con los datos.

El problema es que dependiendo del navegador se ajusta o descoloca, me gustaría saber si hay alguna forma mejor.

Gracias.

Tabla con barras de desplazamiento

Hola

Bueno, creo que esto te puede ayudar.

He usado dos tablas aunque el usuario no notaría dicho efecto y algunos detalles para que se note bien lo que he hecho, solo has de ajustar el código a tus necesidades.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <meta name="language" content="ES" />

        <meta http-equiv="Content-Language" content="es" />

        <meta name="Author" content="PatomaS" />

        <title>Montar una tabla con barras de desplazamiento</title>

        <style type="text/css">

        * {

                padding: 0px;

                margin: 0px;

                border: 0px;

        }

        .Base {

                position: absolute;

                top: 0px;

                left: 0px;

                width: 99%;

        }

        .CapaCabecera {

                position: absolute;

                top: 0px;

                left: 0px;

                width: 250px;

                border: 1px solid #00ff00;

        }

        .TablaCabecera {

                width: 100%;

        }

        .CapaContenido {

                position: absolute;

                top: 25px;

                left: 0px;

                width: 250px;

                height: 100px;

                overflow: auto;

                border: 1px solid #000000;

        }

        td {

                width: 100px;

                text-align: center;

        }

        .TablaContenido {

                width: 200px;

                table-layout: fixed;

                boder-collapse: collapse;

        }

</style>

</head>

<body>

<div class="Base">

        <div class="CapaCabecera">

                <table class="TablaCabecera">

                        <col width="100px" /><col width="100px" />

                        <tr>

                                <th>Título 1</th><th>Título 2</th>

                        </tr>

                </table>

        </div>

        <div class="CapaContenido">

                <table class="TablaContenido">

                        <col width="100px" /><col width="100px" />

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                        <tr>

                                <td>Texto</td><td>Texto</td>

                        </tr>

                </table>

        </div>

</div>

</body>

</html>

Posiblemente hay alguna otra solución, pero mientras alguno de los maestros piensa en ella, aquí dejo esta.

Felicidad

Le echaremos un vistazo muchas gracias

Hola a todos, hola MikiBroki.

Bueno, no sé si esto te puede ayudar.

Es la solución estándar.

Gracias,

He estado probando pero según creo esto hace que las filas de THEAD y TFOOT aparezcan siempre, modicando sólo el contenido del TBODY, pero claro, el problema es que la tabla crece y se hacen necesarias las barras de desplazamiento del navegador.

La solución de las capas supongo que sí irá bien para lo que busco, aunque como dice Patomas, quedamos a la espera de si alguien conoce una mejor

Hola de nuevo.

Cita:

Iniciado por MikiBroki

Gracias,
He estado probando pero según creo esto hace que las filas de THEAD y TFOOT aparezcan siempre, modicando sólo el contenido del TBODY,

No necesariamente.

Cita:

Iniciado por MikiBroki

Gracias,
pero claro, el problema es que la tabla crece y se hacen necesarias las barras de desplazamiento del navegador.

La solución de las capas supongo que sí irá bien para lo que busco, aunque como dice Patomas, quedamos a la espera de si alguien conoce una mejor

A lo mejor te interesa

Muchas gracias Jorolo, las soluciones que daban no funcionaban en firefox+ie pero gracias a ellas he conseguido sacarlo, he puesto el código que funciona por si a alguien le sirve en el enlace que me has pasado

Gracias !

Hola todos :

sólo agregar algún enlace más

barra de desplazamiento en tablas y layers

Allí hay otros enlaces, y en uno de Wako está el detalle de los navegadores que aceptan la barra de desplazamiento en el tbody.

saludos

Lo puedes solucionar facilmente con css (overflow:auto)

Un ejemplo:
<div style="overflow: hidden; height: 20px">
Los títulos (primera fila)
</div>
<div style="overflow:auto; width:450px; height:200px; align:left;">
Datos del resto de la tabla
</div>

Y listo¡

Los valores "auto" y "scroll" no funcionan en ninguna version de Netscape hasta la 4.5 y en algunas versiones de Explorer 4.0.