Atributo CSS table-layout
- la página anterior tab-size
- Página siguiente text-align
Definición y uso
El atributo tableLayout se utiliza para mostrar las reglas de algoritmo de cálculo de celdas, filas y columnas de la tabla.
Diseño fijo de la tabla:
En comparación con el diseño automático de la tabla, el diseño fijo de la tabla permite que el navegador realice el diseño de la tabla más rápidamente.
En el diseño fijo de la tabla, el diseño horizontal depende solo del ancho de la tabla, el ancho de la columna, el ancho del borde de la tabla y el espacio entre celdas, y no del contenido de las celdas.
Al usar el diseño fijo de la tabla, el agente de usuario puede mostrar la tabla después de recibir la primera fila.
Diseño automático de la tabla:
En el diseño automático de la tabla, el ancho de las columnas se determina por el contenido más ancho que no tiene un salto de línea en la celda de la columna.
A veces, este algoritmo puede ser más lento, ya que necesita acceder a todo el contenido de la tabla antes de determinar el diseño final.
Explicación
Esta propiedad especifica el algoritmo de diseño utilizado para completar el diseño de la tabla. El algoritmo de diseño fijo es más rápido, pero menos flexible, mientras que el algoritmo automático es más lento, pero refleja mejor la tabla tradicional de HTML.
Vea también:
Tutoriales de CSS:Cuadros de CSS
Manual de referencia del DOM HTML:Atributo tableLayout
Ejemplo
Configurar el algoritmo de diseño de la tabla:
table
{
table-layout:fixed;
}
Sintaxis de CSS
table-layout: auto|fixed|initial|inherit;
Valor del atributo
| Valor | Descripción |
|---|---|
| automatic | Predeterminado. El ancho de las columnas se determina por el contenido de la celda. |
| fixed | El ancho de las columnas se determina por el ancho de la tabla y el ancho de la columna. |
| inherit | Se especifica que el valor de la propiedad table-layout debe ser heredado del elemento padre. |
Detalles técnicos
| Valor predeterminado: | auto |
|---|---|
| Herencia: | sí |
| Versión: | CSS2 |
| Sintaxis de JavaScript: | object.style.tableLayout="fixed" |
Más ejemplos
- Configurar el diseño de la tabla
- Este ejemplo muestra cómo configurar el diseño de la tabla.
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente esta propiedad.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
- la página anterior tab-size
- Página siguiente text-align
