css - una - tabla con header fijo y scroll horizontal y vertical

¿Cómo se especifica la altura de la tabla para que aparezca una barra de desplazamiento vertical?

Question

Tengo una tabla con muchas filas en mi página. Me gustaría establecer la altura de la tabla, por ejemplo, 500px, de modo que si la altura de la tabla es más grande que eso, aparecerá una barra de desplazamiento vertical. Traté de usar el atributo CSS de height en la table , pero no funciona.

Answer 1

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>

Answer 2

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

Como solo quieres el desplazamiento vertical, prueba esto:

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

EDITAR:

Aparentemente, los elementos de <table> no respetan la propiedad de overflow . Esto parece ser porque los elementos <table> no se representan como display: block por defecto (en realidad tienen su propio tipo de visualización). Puede forzar la propiedad de overflow para que funcione estableciendo el elemento <table> 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.