Propiedad CSS border-collapse

La propiedad CSS border-collapse define si los bordes de las celdas de una tabla se mantienen separados o se colapsan en un único borde compartido.

De forma predeterminada, cada celda de una <table> dibuja su propio borde, por lo que el límite entre dos celdas adyacentes es en realidad dos bordes uno junto al otro (además de cualquier espacio entre ellos). Esto suele parecer una línea gruesa y doble. La propiedad border-collapse permite elegir entre ese aspecto clásico de hoja de cálculo y una cuadrícula más limpia de línea única.

separate (valor predeterminado) — cada celda conserva sus propios bordes. La distancia entre los bordes de celdas adyacentes se controla con la propiedad border-spacing.
collapse — los bordes adyacentes se fusionan en uno. El navegador elige el borde "ganador" para cada arista compartida según el ancho, el estilo y el color, y border-spacing se ignora.

Esta propiedad solo afecta a los elementos <table> y display: inline-table, y es uno de los pocos casos en que los bordes definidos en una <table>, sus filas y sus celdas interactúan entre sí.

Valor inicial	separate
Se aplica a	Elementos table e inline-table.
Heredable	No.
Animable	No.
Versión	CSS2
Sintaxis DOM	object.style.borderCollapse = "collapse";

Sintaxis

Sintaxis de la propiedad CSS border-collapse

border-collapse: separate | collapse | initial | inherit | unset;

Ejemplo de la propiedad border-collapse:

Ejemplo de la propiedad CSS border-collapse con el valor collapse

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-collapse property example</h2>
    <p>Here the "collapse" value is set for the border-collapse property.</p>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el ejemplo siguiente se puede ver el contraste directamente. Cuando se utiliza border-collapse: separate, la propiedad border-spacing define el espacio entre celdas. Cuando se utiliza border-collapse: collapse, border-spacing no tiene efecto: las celdas se tocan y sus bordes se fusionan.

Ejemplo de la propiedad border-collapse con los valores "separate" y "collapse":

Ejemplo de la propiedad CSS border-collapse con el valor separate

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid #ccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 30px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
      #table1 {
        border-collapse: separate;
        border-spacing: 10px;
      }
      #table2 {
        border-collapse: collapse;
        border-spacing: 10px; /* ignored when border-collapse is collapse */
      }
    </style>
  </head>
  <body>
    <h1>Border-collapse property example</h1>
    <h2>border-collapse: separate;</h2>
    <p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
    <h2>border-collapse: collapse;</h2>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
separate	Cada celda tiene sus propios bordes. Este es el valor predeterminado. La propiedad border-spacing controla la distancia entre celdas.
collapse	Las celdas comparten sus bordes. Los bordes adyacentes se fusionan en un único borde.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.
unset	Restablece la propiedad a su valor inicial.

Cómo funciona el modelo de colapso

Cuando se establece border-collapse: collapse, cada arista compartida solo puede dibujar un borde, por lo que el navegador debe resolver los conflictos entre los bordes declarados en la tabla, la fila y las dos celdas adyacentes. Las reglas, en orden, son:

Un borde con border-style: hidden siempre gana y elimina la arista por completo.
Un borde más ancho prevalece sobre uno más estrecho.
Si los anchos son iguales, los estilos se clasifican así: double > solid > dashed > dotted > ridge > outset > groove > inset.
Si el ancho y el estilo siguen empatados, gana el borde perteneciente al elemento más cercano a la celda (celda sobre fila sobre tabla).

Por eso, en el modo colapsado, definir anchos de borde diferentes en <td> y <table> puede no verse como se espera: solo se pinta el borde ganador.

Cuándo utilizarlo

Use collapse para la mayoría de las tablas de datos. Produce la cuadrícula limpia de línea única que los usuarios esperan en hojas de cálculo y es la forma más sencilla de evitar bordes dobles.
Mantenga separate cuando desee un espaciado visible entre celdas (configure border-spacing), esquinas de celda redondeadas o bordes por celda que no se fusionen.
Tenga en cuenta que border-radius en las celdas solo tiene efecto visible en el modo separate; los bordes colapsados no pueden ser redondeados.

Práctica

¿Qué hace la propiedad 'border-collapse' de CSS?

Define el espacio entre las celdas de una tabla.Permite decidir si los bordes de la tabla deben colapsar en un único borde o mostrarse como bordes separados.Ajusta el tamaño de la tabla.Se usa para especificar el color de los bordes de la tabla.Determina el estilo de los cuatro bordes de una celda de tabla.

Recursos relacionados

Propiedad CSS border-spacing — establece el espacio entre celdas cuando se usa border-collapse: separate.
Propiedad CSS empty-cells — muestra u oculta los bordes en celdas vacías (solo se aplica en el modo separate).
Propiedad CSS table-layout — controla cómo el navegador dimensiona las columnas de la tabla.
Propiedad CSS border — el atajo para el ancho, el estilo y el color del borde de un elemento.