Tabla con Scroll en HTML y CSS

Las tablas son un elemento común en el desarrollo web, utilizadas para representar datos en una forma organizada y fácil de leer. Sin embargo, cuando se tiene una gran cantidad de datos, puede ser difícil mostrarlos todos sin que la tabla abarque todo el espacio de la página. Para solucionar este problema, muchos desarrolladores utilizan una tabla con scroll.

En este artículo, te enseñaremos cómo implementar una tabla con scroll utilizando HTML y CSS. Aprenderás cómo crear una tabla estática y cómo hacer scroll en la tabla para ver los datos que están fuera de la vista.

Creando una tabla estática

Primero, vamos a crear una tabla estática utilizando HTML. Crearemos una tabla simple que contendrá nombres de personas y sus edades.

Para crear la tabla, necesitamos utilizar la etiqueta <table>, que define la tabla en HTML. Dentro de esta etiqueta, creamos filas y columnas utilizando las etiquetas <tr> y <td>, respectivamente.

A continuación, te mostramos el código HTML para crear una tabla con dos filas y tres columnas:


<table>
<tr>
<td>Nombre</td>
<td>Edad</td>
<td>País</td>
</tr>
<tr>
<td>Juan</td>
<td>22</td>
<td>México</td>
</tr>
<tr>
<td>Ana</td>
<td>34</td>
<td>Argentina</td>
</tr>
</table>


Este código creará una tabla simple con dos filas y tres columnas. Ahora, necesitamos hacer que la tabla sea scrollable para ver los datos que están fuera de la vista.

Haciendo scroll en la tabla

Para hacer que la tabla sea scrollable, necesitamos utilizar CSS. Primero, vamos a definir las dimensiones de la tabla utilizando las propiedades width y height. A continuación, vamos a definir la propiedad overflow: auto;, que hace que se agregue un scroll a la tabla.

Aquí se muestra el código CSS necesario para hacer que la tabla sea scrollable:


table {
width: 100%;
height: 200px;
overflow: auto;
}


Con este código, la tabla tendrá una altura de 200px y, si los datos se extienden más allá de la vista, se agregarán barras de scroll para permitir que el usuario vea todos los datos.

Además, puedes jugar con los valores de las dimensiones para ajustar el tamaño de la tabla a tus necesidades.

Ejemplos de código

A continuación, te mostramos dos ejemplos de código para que puedas probar por ti mismo cómo crear una tabla con scroll en HTML y CSS.

El primer ejemplo es una tabla con scroll vertical que te permite ver los datos que están fuera de la vista. Puedes agregar tantas filas y columnas como necesites. Puedes ver el ejemplo aquí:


<table>
<thead>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</thead>
<tbody>
<tr>
<td>Celda 1-1</td>
<td>Celda 1-2</td>
<td>Celda 1-3</td>
</tr>
<tr>
<td>Celda 2-1</td>
<td>Celda 2-2</td>
<td>Celda 2-3</td>
</tr>
<tr>
<td>Celda 3-1</td>
<td>Celda 3-2</td>
<td>Celda 3-3</td>
</tr>
<tr>
<td>Celda 4-1</td>
<td>Celda 4-2</td>
<td>Celda 4-3</td>
</tr>
<tr>
<td>Celda 5-1</td>
<td>Celda 5-2</td>
<td>Celda 5-3</td>
</tr>
<tr>
<td>Celda 6-1</td>
<td>Celda 6-2</td>
<td>Celda 6-3</td>
</tr>
<tr>
<td>Celda 7-1</td>
<td>Celda 7-2</td>
<td>Celda 7-3</td>
</tr>
<tr>
<td>Celda 8-1</td>
<td>Celda 8-2</td>
<td>Celda 8-3</td>
</tr>
<tr>
<td>Celda 9-1</td>
<td>Celda 9-2</td>
<td>Celda 9-3</td>
</tr>
<tr>
<td>Celda 10-1</td>
<td>Celda 10-2</td>
<td>Celda 10-3</td>
</tr>
</tbody>
</table>


El segundo ejemplo es una tabla que tiene scroll horizontal para que puedas ver los datos que están fuera de la vista. Puedes agregar tantas filas y columnas como necesites. Puedes ver el ejemplo aquí:


<table>
<tbody>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
<th>Encabezado 4</th>
<th>Encabezado 5</th>
<th>Encabezado 6</th>
<th>Encabezado 7</th>
<th>Encabezado 8</th>
<th>Encabezado 9</th>
<th>Encabezado 10</th>
</tr>
<tr>
<td>Celda 1-1</td>
<td>Celda 1-2</td>
<td>Celda 1-3</td>
<td>Celda 1-4</td>
<td>Celda 1-5</td>
<td>Celda 1-6</td>
<td>Celda 1-7</td>
<td>Celda 1-8</td>
<td>Celda 1-9</td>
<td>Celda 1-10</td>
</tr>
<tr>
<td>Celda 2-1</td>
<td>Celda 2-2</td>
<td>Celda 2-3</td>
<td>Celda 2-4</td>
<td>Celda 2-5</td>
<td>Celda 2-6</td>
<td>Celda 2-7</td>
<td>Celda 2-8</td>
<td>Celda 2-9</td>
<td>Celda 2-10</td>
</tr>
<tr>
<td>Celda 3-1</td>
<td>Celda 3-2</td>
<td>Celda 3-3</td>
<td>Celda 3-4</td>
<td>Celda 3-5</td>
<td>Celda 3-6</td>
<td>Celda 3-7</td>
<td>Celda 3-8</td>
<td>Celda 3-9</td>
<td>Celda 3-10</td>
</tr>
</tbody>
</table>


Conclusión

Las tablas con scroll son una herramienta útil para mostrar una gran cantidad de datos en una forma organizada y fácil de leer sin abarcar todo el espacio de la página. Si tienes una tabla con muchos datos, intenta utilizar esta técnica para hacer que tus datos sean más
[nekopost slugs="establecer-css-de-color-de-fondo-transparente,alinear-contenido-css,cambiar-el-tamano-de-la-imagen-css,cirse-css-con-borde,gyphen-em-dash-and-en-dash-en-html,agregar-imagen-dentro-de-la-celda-de-tabla-en-html,texto-en-negrita-css,establecer-font-border-css,opacidad-de-imagen-de-fondo-css"]