CSS: propiedades de diseño de tabla

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.

      (Visited 8 times, 1 visits today)