Hacer desplazable la tabla HTML

Para evitar que una tabla HTML larga haga crecer la página, coloca la tabla semántica dentro de un contenedor de altura limitada y establece overflow-y: auto. El contenedor se desplaza verticalmente cuando su contenido supera ese límite; la tabla conserva su estructura habitual de filas y columnas.

Cómo hacer que una tabla HTML se desplace verticalmente con CSS

Esta página completa usa un contenedor de 200 píxeles de alto y una tabla nativa con encabezado y cuerpo. Las filas hacen que el contenido supere la altura del contenedor, de modo que se pueda desplazar dentro del área de la tabla.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollable table</title>
  <style>
    .table-scroll {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="table-scroll" role="region" aria-label="Employee directory" tabindex="0">
    <table>
      <thead>
        <tr><th scope="col">Name</th><th scope="col">Age</th><th scope="col">Country</th></tr>
      </thead>
      <tbody>
        <tr><td>John Doe</td><td>30</td><td>USA</td></tr>
        <tr><td>Jane Smith</td><td>25</td><td>Canada</td></tr>
        <tr><td>Sam Wilson</td><td>28</td><td>UK</td></tr>
        <tr><td>Emily Johnson</td><td>35</td><td>Australia</td></tr>
        <tr><td>Michael Brown</td><td>40</td><td>Germany</td></tr>
        <tr><td>Linda Davis</td><td>22</td><td>France</td></tr>
        <tr><td>James Garcia</td><td>29</td><td>Spain</td></tr>
        <tr><td>Patricia Martinez</td><td>31</td><td>Mexico</td></tr>
        <tr><td>Robert Wilson</td><td>38</td><td>Italy</td></tr>
        <tr><td>Jessica Lee</td><td>27</td><td>Netherlands</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

max-height mantiene limitado el contenedor, mientras que overflow-y controla qué ocurre cuando la tabla es más alta. tabindex="0" permite llegar a la región con el teclado; enfócala y usa las teclas de flecha para comprobar que se desplaza. La etiqueta de la región proporciona contexto a las tecnologías de asistencia. Conserva <table>, <thead>, <tbody> y las celdas de encabezado para que los navegadores y las tecnologías de asistencia mantengan las relaciones de la tabla.

Elegir auto o scroll para el desbordamiento vertical

Usa overflow-y: auto para que aparezca una barra de desplazamiento cuando el contenido necesite superar el contenedor. Así no se reserva espacio para la barra cuando las filas caben. overflow-y: scroll solicita un mecanismo de desplazamiento incluso cuando el contenido cabe, aunque la barra visible depende del sistema operativo y del navegador. En ambos casos, aplica la regla de desbordamiento al contenedor, no a las filas individuales. Se necesita una altura o una altura máxima para establecer el límite vertical; sin ella, el contenedor puede crecer junto con la tabla y no hace falta el desplazamiento vertical interno.

Para copiar rápidamente la regla del contenedor, ejecuta este pequeño ejemplo de JavaScript. Imprime las declaraciones CSS usadas arriba; ajusta la altura según el área visible.

const rule = [
  ".table-scroll {",
  "  max-height: 200px;",
  "  overflow-y: auto;",
  "}"
].join("\n");
console.log(rule);

.table-scroll {
  max-height: 200px;
  overflow-y: auto;
}

Mantener la semántica de la tabla y el acceso mediante teclado

Usa elementos de tabla reales para los datos tabulares en lugar de sustituirlos por celdas genéricas de CSS Grid. Grid resulta útil para crear diseños, pero un conjunto de elementos div no expone automáticamente las relaciones entre encabezados y celdas como lo hace una tabla de datos. El ejemplo identifica el contenedor desplazable como una región y lo incluye en el orden de tabulación. Pruébalo con el teclado: tabula hasta la región etiquetada, desplázala con las teclas de flecha y continúa tabulando. Evita añadir un rol de tabla de ARIA al marcado HTML nativo de tabla, que ya proporciona esa semántica.

Añadir desplazamiento horizontal y estilos de Bootstrap

Si las columnas son más anchas que el espacio disponible, añade overflow-x: auto a .table-scroll; así, el contenedor podrá desplazarse tanto horizontal como verticalmente. Mantén la tabla lo bastante ancha para sus columnas en vez de comprimir el texto hasta volverlo ilegible. Prueba la página en la ventana estrecha donde se usará la tabla y comprueba que se pueda acceder a todas las columnas.

Bootstrap puede aplicar estilos a la misma tabla semántica con clases como table y table-bordered cuando el proyecto ya carga Bootstrap. Esas clases afectan a la presentación; el contenedor limitado y sus reglas CSS de desbordamiento siguen proporcionando el comportamiento de desplazamiento. Este método deja explícito el desplazamiento y permite que el marcado de la tabla sea útil con Bootstrap o sin él.