Tabla receptiva de CSS
Tabla receptiva
Una tabla receptiva mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo:
Primer nombre | Apellido | 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 |
víspera | jackson | 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 |
Agregue un elemento contenedor (como <div>) overflow-x:auto
alrededor del elemento <table> para que responda:
Ejemplo
<div style="overflow-x:auto;">
<table>
... table content ...
</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").
Más ejemplos
Este ejemplo demuestra cómo crear una mesa elegante.
Este ejemplo demuestra cómo colocar el título de la tabla.
Propiedades de la tabla CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |