CSS: propiedad de colapso de borde

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: propiedad de colapso de borde

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada borde plegable Con sintaxis y ejemplos.

describir

La propiedad CSS border-collapse define el modelo de representación para los bordes de la tabla que afectan la apariencia de la tabla.

sintaxis

La sintaxis de la propiedad CSS border-collapse es:

border-collapse: value;

parámetro o parámetro

valor

Modelo de renderizado aplicado a los bordes de la tabla. Puede ser uno de los siguientes:

notas

• La propiedad border-collapse funciona para
  elemento, por defecto es independiente.
  El modelo de borde dividido representa una tabla para que las celdas adyacentes tengan sus propios bordes no compartidos, y la propiedad border-spacing determina el espacio entre celdas.
  El modelo de borde colapsado representa una tabla para que las celdas adyacentes compartan sus bordes.

  Compatibilidad del navegador

  La propiedad CSS border-collapse tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Internet Explorer 5+ (IE 5+)
  • ópera
  • Safari (WebKit)

  ejemplo

  Discutiremos la propiedad border-collapse a continuación, explorando ejemplos de cómo usarla en CSS.

  Primero veamos un ejemplo de cómo aplicar el modelo de borde dividido a una tabla. Por ejemplo:

  CSS se ve así:

  table { border-collapse: separate; border: 1px solid red; }
  
  th { border: 1px solid blue; }
  
  td { border: 1px solid black; }

  HTML se ve así:

  <table>
    <tr>
      <th>Column 1 Heading</th>
      <th>Column 2 Heading</th>
    </tr>
    <tr>
      <td>prograrmaplus.com</td>
      <td>Technical reference site</td>
    </tr>
    <tr>
      <td>checkyourmath.com</td>
      <td>Math calculation site</td>
    </tr>
    <tr>
      <td>bigactivities.com</td>
      <td>Kids activity site</td>
    </tr>
  </table>

  Una tabla que usa el modelo de borde dividido se ve así:

  En este ejemplo de colapso de borde CSS, vamos a

  La propiedad border-collapse de la etiqueta se establece en un valor separado que representa la tabla utilizando el modelo de borde dividido (el valor predeterminado para las tablas HTML). Como puede ver, las celdas adyacentes tienen sus propios bordes diferentes.

  Ahora cambiaremos la tabla para usar el modelo de borde colapsado cambiando la propiedad border-collapse para colapsar, y veremos qué sucede:

  table { border-collapse: collapse; border: 1px solid red; }
  
  th { border: 1px solid blue; }
  
  td { border: 1px solid black; }

  Ahora, usando el modelo de borde colapsado, nuestra tabla se verá así:

  Como puede ver, nuestra tabla se representa utilizando el modelo de borde colapsado, lo que hace que las celdas adyacentes compartan sus bordes. Esto reduce los espacios en blanco entre las celdas de la tabla y elimina algunos estilos de borde de la tabla, ya que los bordes ahora se comparten.

  (Visited 7 times, 1 visits today)