"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Puede CSS controlar el ancho de las celdas de la tabla independientemente del tamaño del contenido?

¿Puede CSS controlar el ancho de las celdas de la tabla independientemente del tamaño del contenido?

Publicado el 2024-11-07
Navegar:549

Can CSS Control Table Cell Widths Regardless of Content Size?

Controlar el ancho de las celdas de la tabla con CSS

En el ámbito de las tablas HTML, garantizar el ancho uniforme de las celdas de la tabla puede ser un desafío cuando se trata de contenido de diferentes tamaños. ¿Podemos lograr el resultado deseado únicamente a través de CSS, independientemente del número de celdas involucradas?

La estructura HTML es sencilla: un

principal sirve como contenedor de la tabla, mientras que los elementos
secundarios representan la tabla. celdas.

Se puede aprovechar CSS para solucionar este problema. Para garantizar anchos de celda iguales, independientemente del tamaño del contenido, necesitamos:

  1. Activar el mecanismo de diseño de tabla fija: Establecer diseño de tabla: fijo; en el padre
    . Esto le indica al navegador que aplique los anchos de celda especificados en lugar de ajustarlos automáticamente al contenido.
  2. Asignar un ancho a las celdas de la tabla: Si bien no es obligatorio, asignar un ancho pequeño (por ejemplo, 2 %) a cada
    que representa una celda de la tabla actúa como un activador para el diseño de la tabla fija.

    El código CSS final aparece como sigue:

    div {
      display: table;
      width: 250px;
      table-layout: fixed;
    }
    
    div > div {
      display: table-cell;
      width: 2%;
    }

    Con este enfoque, las celdas de la tabla mantendrán el mismo ancho, lo que garantizará una apariencia consistente independientemente de su contenido.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3