¿Cómo especificar la altura de la tabla de modo que aparezca una barra de desplazamiento vertical?

100

Tengo una tabla con muchas filas en mi página. Me gustaría establecer la altura de la tabla, digamos 500px, de modo que si la altura de la tabla es mayor que eso, aparecerá una barra de desplazamiento vertical. Intenté usar el heightatributo CSS en el table, pero no funciona.

css css-tables

— Misha Moroshko
fuente

Tal vez use en max-heightlugar de solo heightya que este último obligará a que la altura de la mesa sea500px

— Fred

Es posible que desee hacer una segunda pregunta sobre cómo evitar que la fila del encabezado se desplace. ;)

— Bill Bingham

Ver también stackoverflow.com/questions/1587927/…

— Alex Nolasco

Respuestas:

173

Intente usar la overflowpropiedad CSS. También hay propiedades separadas para definir el comportamiento de desbordamiento horizontal ( overflow-x) y desbordamiento vertical ( overflow-y).

Como solo desea el desplazamiento vertical, intente esto:

table {
  height: 500px;
  overflow-y: scroll;
}

EDITAR:

Aparentemente los <table>elementos no respetan la overflowpropiedad. Esto parece deberse a que los <table>elementos no se representan display: blockde forma predeterminada (en realidad, tienen su propio tipo de visualización). Puede forzar que la overflowpropiedad funcione configurando el <table>elemento como un tipo de bloque:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Tenga en cuenta que esto hará que el elemento tenga un ancho del 100%, por lo que si no desea que ocupe todo el ancho horizontal de la página, también debe especificar un ancho explícito para el elemento.

— AgenteConundrum
fuente

Sin embargo, esto no limita la altura.

— Fred

No, lo hace, solo necesita display:blocksobre la mesa para que se comporte como un div jsfiddle.net/TSGSA/1

— Fred

@Fred: Las grandes mentes piensan igual. Actualicé mi respuesta mientras comentabas. :)

— AgentConundrum

Esta respuesta realmente me ayudó, pero en lugar de aplicarla a la etiqueta de la tabla, debería hacerse en el tbody, para permitir que el encabezado permanezca estático al desplazarse. Luego hay algunos estilos para ordenar con respecto al área en el encabezado que está encima de la barra de desplazamiento.

— David

Si vas a usar esto en el tbody, asegúrate de agregar el display: block al thead (y probablemente al tfoot) o podrían volverse un poco locos. El problema, al parecer, es que una vez que haces esto, has roto el vínculo entre thead y tbody: las columnas del primero no son conscientes del ancho del segundo. Así que remenda eso y baja la pendiente resbaladiza. "

— Morí

Debe envolver la tabla dentro de otro elemento y establecer la altura de ese elemento. Ejemplo con CSS en línea:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

— Halcón oscuro
fuente

Esto no permitirá mantener el thead en su lugar mientras el tbody se desplaza.

— David

Este requisito no está en la pregunta original.

— Dark Falcon

Además, la otra respuesta (aceptada) tampoco mantiene el tema en su lugar.

— Brock Adams

Aún puede hacer que parezca que hay un encabezado en su lugar con este método. Oculta el encabezado de la tabla, luego crea una segunda tabla encima de la primera tabla que tiene el encabezado. Luego, diseñe ambas tablas para tener display:table;sus filas display:table-row;y sus celdas display:table-cell;y las dos tablas coincidirán y parecerán ser una. (NOTA: esto no funciona con tablas muy grandes; básicamente, les coincide cuando se he utilizado esta técnica varias veces..)

— levininja

Por supuesto. Se debe especificar el tamaño del padre para usar tamaños relativos. Por ejemplo: jsfiddle.net/hz8wy

— Dark Falcon

para establecer la altura de la tabla, primero debe establecer la propiedad css "display: block" y luego puede agregar las propiedades "width / height". Encuentro este artículo de Mozilla un muy buen recurso para aprender cómo diseñar tablas: Enlace

— krupesh Anadkat
fuente