¿Cómo hacer que una tabla, que sea más ancha que el tamaño de la pantalla, se pueda desplazar y mantener fija la fila del encabezado?

Tengo un table con 2 columnas y cada columna tiene 800 píxeles de ancho. Quiero mostrar esta tabla en la ventana de 800x50. Entonces debería haber una barra de desplazamiento horizontal y vertical para ver la tabla completa.¿Cómo hacer que una tabla, que sea más ancha que el tamaño de la pantalla, se pueda desplazar y mantener fija la fila del encabezado?

Aunque he encontrado algunas soluciones relacionadas (this y this) en SO, solo funcionan si el ancho de la tabla es menor que el tamaño de la pantalla. En mi caso, el tamaño de la pantalla es de 1200 px y el ancho total de la mesa es de 1600 px.

¿Cómo podría hacer esto? Quiero lograr algo como this.

EDIT Vaya, olvidé agregar un requisito más. Lo siento. Quiero que el encabezado de la tabla permanezca fijo mientras el usuario desplaza la tabla.

Edit2

He intentado soluciones mencionadas a continuación para envolver en un div, pero en este caso de desplazamiento vertical no aparece. Por favor, consulte this table con envoltura div. Parece que este problema solo ocurre si el ancho de la mesa es mayor que el tamaño de la pantalla. Estoy probando en FF3.6.

Edit3

actual table código. Esto no tiene desplazamiento vertical aunque puedo desplazarme verticalmente.

<div style="overflow:scroll; width:800px;height:50px" > 
<table style="width:1600px" border="1"> 
    <thead> 
    <tr> 
     <th style="width:800px">id_1</th> 
     <th style="width:800px">id_1</th> 
    </tr> 
    </thead> 
    <tbody style=""> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    </tbody> 
</table> 
</div>

Fuente

2010-04-13 understack

Lo siento, pero es una dimensión 800x50 inutilizable. Las barras de desplazamiento solo ocupan unos 20 píxeles, lo que te deja unos 30 píxeles para jugar ... ¿así que le pides a tus usuarios que se desplacen con una o dos filas visibles a la vez? ¿Seguro que no quiso decir 800x500? – Robusto

Esos son números falsos, solo quiero hacer que esta mesa funcione y luego cambiar las dimensiones en consecuencia. – understack

Puede envolver la tabla en un div que tenga un tamaño fijo (800x50) y establecer overflow:scroll.

Fuente

2010-04-13 18:38:59

@Vivin Paliath: No veo desplazamiento vertical con esto cuando la longitud de la tabla es más grande que el tamaño de la pantalla. Por favor, vea esto: http://jsbin.com/uwubu3/3 – understack

Veo las barras de desplazamiento bien cuando lo abro. ¿Te refieres al tamaño de ventana? Si la tabla es más grande que el tamaño de la ventana, tendrá que desplazarse por toda la página para ver las barras de desplazamiento. No hay forma de evitar eso para cambiar el tamaño de su tabla al tamaño de la ventana. –

No veo las barras de desplazamiento tampoco, pero creo que es porque su altura es demasiado pequeña. Intenta configurar tu altura a 100px, y funcionará bien. –

Deja tus mesa en un div con un ancho de 800 < y establezca overflow: scroll.

Fuente

2010-04-13 18:38:44

No sé si funcionaría, pero ¿ha intentado configurar max-width: 100% para la página?

Fuente

2010-04-13 18:40:13 animuson

Simplemente agregue overflow:scroll al CSS de su elemento de tabla. Por cierto. su ejemplo no muestra ningún desplazamiento.

Fuente

2010-04-13 18:41:11

@Paul de Vrieze: corrigió el ejemplo. Ahora muestra desplazamiento pero solo horizontal. – understack

si desea que el encabezado de permanecer fija que acaba de hacer un poco de CSS

#header { 
    position:fixed; 
    left:0; 
    top:0; 
}

Fuente

2010-04-13 18:58:23 Catfish

¿Cómo hacer que una tabla, que sea más ancha que el tamaño de la pantalla, se pueda desplazar y mantener fija la fila del encabezado?

Respuesta

Cuestiones relacionadas