Propriedade CSS border-collapse

A propriedade CSS border-collapse define se as bordas das células de uma tabela são mantidas separadas ou fundidas em uma única borda compartilhada.

Por padrão, cada célula de um <table> desenha sua própria borda, portanto o limite entre duas células adjacentes é, na prática, duas bordas lado a lado (além de qualquer espaço entre elas). Isso costuma parecer uma linha grossa e duplicada. A propriedade border-collapse permite escolher entre essa aparência clássica de planilha e uma grade mais limpa com linha única.

separate (valor padrão) — cada célula mantém suas próprias bordas. A distância entre as bordas de células adjacentes é controlada pela propriedade border-spacing.
collapse — bordas adjacentes se fundem em uma só. O navegador escolhe a borda "vencedora" para cada aresta compartilhada com base na largura, estilo e cor, e border-spacing é ignorado.

Esta propriedade afeta apenas elementos <table> e display: inline-table, e é um dos poucos casos em que bordas definidas em um <table>, em suas linhas e em suas células interagem entre si.

Valor Inicial	separate
Aplica-se a	Elementos table e inline-table.
Herdado	Não.
Animável	Não.
Versão	CSS2
Sintaxe DOM	object.style.borderCollapse = "collapse";

Sintaxe

Sintaxe da propriedade CSS border-collapse

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

Exemplo da propriedade border-collapse:

Exemplo da propriedade CSS border-collapse com o 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>

Experimente Você Mesmo »

Resultado

No exemplo abaixo, você pode ver o contraste diretamente. Quando border-collapse: separate é usado, a propriedade border-spacing define o espaço entre as células. Quando border-collapse: collapse é usado, border-spacing não tem efeito — as células se tocam e suas bordas se fundem.

Exemplo da propriedade border-collapse com os valores "separate" e "collapse":

Exemplo da propriedade CSS border-collapse com o 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>

Experimente Você Mesmo »

Valores

Valor	Descrição
separate	Cada célula tem suas próprias bordas. Este é o valor padrão. A propriedade border-spacing controla a distância entre as células.
collapse	As células compartilham suas bordas. Bordas adjacentes se fundem em uma única borda.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.
unset	Redefine a propriedade para seu valor inicial.

Como funciona o modelo de colapso

Quando border-collapse: collapse está definido, cada aresta compartilhada só pode desenhar uma borda, portanto o navegador deve resolver conflitos entre as bordas declaradas na tabela, na linha e nas duas células adjacentes. As regras, em ordem, são:

Uma borda com border-style: hidden sempre vence e remove a aresta completamente.
Uma borda mais larga supera uma mais estreita.
Se as larguras forem iguais, os estilos são classificados: double > solid > dashed > dotted > ridge > outset > groove > inset.
Se a largura e o estilo ainda empatarem, a borda pertencente ao elemento mais próximo da célula vence (célula sobre linha sobre tabela).

É por isso que, no modo colapsado, definir larguras de borda diferentes em <td> e <table> pode não ter a aparência esperada — apenas a borda vencedora é renderizada.

Quando usar

Use collapse para a maioria das tabelas de dados. Produz a grade limpa com linha única que as pessoas esperam de planilhas e é a maneira mais fácil de evitar bordas duplicadas.
Mantenha separate quando quiser espaçamento visível entre células (defina border-spacing), cantos arredondados nas células ou bordas por célula que não se fundam.
Observe que border-radius em células só tem efeito visível no modo separate; bordas colapsadas não podem ser arredondadas.

Prática

O que a propriedade 'border-collapse' do CSS faz?

Define o espaço entre as células de uma tabela.Permite decidir se as bordas da tabela devem se fundir em uma única borda ou ser exibidas como bordas separadas.Ajusta o tamanho da tabela.É usada para especificar a cor das bordas da tabela.Determina o estilo para as quatro bordas de uma célula da tabela.

Recursos relacionados

Propriedade CSS border-spacing — define o espaço entre células quando border-collapse: separate é usado.
Propriedade CSS empty-cells — exibe ou oculta bordas em células vazias (aplica-se apenas no modo separate).
Propriedade CSS table-layout — controla como o navegador dimensiona as colunas da tabela.
Propriedade CSS border — o atalho para largura, estilo e cor da borda de um elemento.