Cómo crear: Tabla responsiva

Aprende a crear tablas responsivas.

Tabla responsiva

Si la pantalla es demasiado pequeña para mostrar todo el contenido, la tabla responsiva mostrará una barra de desplazamiento horizontal.

Ajusta el tamaño de la ventana del navegador para ver los efectos:

Nombre Apellido Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

Para crear una tabla responsiva, agrega un contenedor que incluya overflow-x:auto del elemento contenedor:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Prueba personalmente

Nota:En OS X Lion (Mac 上)，la barra de desplazamiento se oculta por defecto y se muestra solo al usarla (incluso si se ha configurado "overflow:scroll" o auto).

Páginas relacionadas

Tutoriales:Tabla de CSS