Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades de diseño de tabla
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada disposición de la mesa Con sintaxis y ejemplos.
describir
La propiedad de diseño de tabla CSS define el algoritmo utilizado para diseñar celdas, filas y columnas en tablas HTML.
sintaxis
La sintaxis de la propiedad CSS del formato de tabla es:
table-layout: value;
parámetro o parámetro
valor
Algoritmos de diseño para celdas de tablas, filas y columnas. Puede ser uno de los siguientes:
| valor |
describir |
| estable |
El ancho de tablas y celdas viene dado por
y
Determinado por el ancho del elemento o el ancho de la primera fila de celdas de la tabla.
mesa { disposición de la mesa: fijo; }
| carro |
El algoritmo automático del navegador para determinar el diseño de la tabla a utilizar en función del contenido de la tabla.
tabla { disposición de la tabla: auto; } |
| heredar |
El elemento heredará el diseño de la tabla de su elemento principal
tabla { disposición de la tabla: herencia; } |
notas
- Si la propiedad table-layout se establece en fixed, el ancho de la tabla y el ancho de la celda están determinados por:
-
y
el ancho del elemento, o
- El ancho de las celdas en la primera fila de la tabla.
- Si IE8 no admite anchos de celda en tablas HTML, intente establecer la propiedad de diseño de tabla en fijo.
- Si es necesario, puede usar la propiedad de desbordamiento en combinación con un valor de diseño de tabla fijo para recortar el contenido de desbordamiento.
Compatibilidad del navegador
La propiedad de diseño de tabla CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Internet Explorer 5+ (IE 5+)
- Ópera 7+
- Safari (WebKit)
ejemplo
Discutiremos la propiedad de diseño de tabla a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
estable
Veamos un ejemplo de configuración de la propiedad table-layout en fixed.
CSS se ve así:
table { table-layout: fixed; }
En este ejemplo de diseño de tabla CSS, configuramos la propiedad de diseño de tabla en fijo. Establecer la propiedad table-layout en fixed forzará a IE8 a respetar el ancho de las celdas en la tabla. Las versiones más nuevas de IE respetarán el ancho de las celdas sin establecer la propiedad de diseño de la tabla en fijo.
carro
Veamos un ejemplo de configuración de la propiedad table-layout en automático.
CSS se ve así:
table { table-layout: auto; }
En este ejemplo de diseño de tabla CSS, configuramos la propiedad de diseño de tabla en automático. El navegador ahora usará un algoritmo automático para diseñar las celdas, filas y columnas en la tabla según el contenido de la tabla.
|