Hacer desplazable la tabla HTML

Este artículo presentará un método para crear una tabla HTML desplazable verticalmente.

Establezca la propiedad CSS overflow-y en scroll para hacer desplazable la tabla HTML

Cuando una tabla HTML es larga, se necesita una función para desplazarse solo por la tabla, no por toda la página. Para lograr esta funcionalidad, podemos usar la propiedad overflow-y.

Aquí, y representa el eje y. La propiedad define la propiedad de desbordamiento de un elemento a nivel de bloque a lo largo del eje vertical.

El valor scroll hace que el elemento a nivel de bloque se pueda desplazar de arriba a abajo.

Para hacer que una tabla HTML se pueda desplazar verticalmente, podemos envolver la tabla con un <div>. Luego, podemos establecer una altura fija para el <div> usando la propiedad height.

Después de eso, podemos establecer la propiedad overflow-y en scroll. Si la altura de la tabla excede la altura del div que habíamos establecido, entonces overflow-y: scroll hará que la tabla se pueda desplazar en la dirección y (verticalmente).

Por lo tanto, debemos asegurarnos de que la altura de la tabla exceda la altura del <div>.

Por ejemplo, cree un div y asígnele un nombre de clase de contenedor. Dentro de ese div, cree una tabla y asígnele un nombre de clase de data.

Llene la tabla con datos usando las etiquetas tr, th y td.

En CSS, seleccione la clase container y establezca su propiedad height en 70px y su propiedad overflow-y en scroll. Asegúrese de que el contenido de la tabla tenga una altura de más de 70px.

A continuación, seleccione la tabla utilizando el selector de clase y los elementos th y td de la tabla. Luego, establezca su propiedad border en 1px solid black, la propiedad border-collapse en collapse y padding en 4px. (Nota: esto no es obligatorio, es para que la tabla sea más legible).

El siguiente ejemplo muestra que la tabla se puede desplazar verticalmente, ya que la altura de la tabla es mayor que la del div o .container.

Código de ejemplo:

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

Como resultado, toda la tabla no es visible cuando cargamos la página. Es porque hemos establecido 70px como la altura del contenedor.

Pero cuando nos desplazamos hacia abajo verticalmente, podemos ver el resto del contenido de la tabla.

De esta manera, podemos hacer que la tabla HTML se pueda desplazar verticalmente usando la propiedad overflow-y y configurándola en scroll.