Cómo HACER - Tablas receptivas
Aprenda a crear una tabla receptiva.
Tablas receptivas
Una tabla receptiva mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo. Cambie el tamaño de la ventana del navegador para ver el efecto:
Primer nombre | Apellido | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Herrero | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
víspera | jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adán | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Para crear una tabla receptiva, agregue un elemento contenedor overflow-x:auto
alrededor de la <tabla>:
Ejemplo
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Nota: En OS X Lion (en Mac), las barras de desplazamiento están ocultas de forma predeterminada y solo se muestran cuando se usan (aunque esté configurado "desbordamiento: desplazamiento" o automático).
Sugerencia: vaya a nuestro tutorial de tablas CSS para obtener más información sobre cómo diseñar tablas.