Día 52: CSS Table Responsive
La ruta del desarrollador web frontend autónomo🤹♂️
Table of contents
Tabla responsive
Una tabla responsive mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo.
Agregue un elemento contenedor (como <div>) con overflow-x:auto alrededor del elemento <table> para que sea responsive:
Ejemplo:
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 con
overflow:scroll).
Todas las propiedades de tabla
| Propiedad | Descripción |
border | Establece todas las propiedades del borde en una declaración. |
border-collapse | Especifica si los bordes de la tabla deben contraerse o no. |
border-spacing | Especifica la distancia entre los bordes de las celdas adyacentes. |
caption-side | Especifica la ubicación de un título de tabla. |
empty-cells | Especifica si mostrar o no los bordes y el fondo en las celdas vacías de una tabla. |
table-layout | Establece el algoritmo de diseño que se utilizará para una tabla. |
Resumen
Una tabla responsive muestra una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo. Para hacerlo, se agrega un elemento contenedor con overflow-x:auto alrededor del elemento <table>. También se presentan las propiedades de tabla como border, border-collapse, border-spacing, caption-side, empty-cells y table-layout.
Traducido con 💚 desde W3Schools.com