Propriedade border-collapse

A propriedade border-collapse faz com que as bordas duplas entre as células td ou células th de uma tabela HTML (e entre a borda da célula e a própria tabela) se colapsem e pareçam uma só.

Esta propriedade é aplicada apenas para tabelas e para elementos com display no valor table ou inline-table. Para elementos blocom comuns, infelizmente, não funcionará. Observe que deve ser aplicada à tabela, e não às suas células.

Sintaxe

cssseletor {
  border-collapse: collapse | separate;
}

Valores

Valor	Descrição
`collapse`	As bordas duplas parecerão uma só. Há efeitos colaterais: a propriedade `border-spacing` e o atributo `cellspacing` deixarão de funcionar.
`separate`	Cada célula da tabela terá sua própria borda (portanto, em alguns lugares as bordas serão duplas, se o espaçamento entre as células for zero).

Valor padrão: separate.

Exemplo . Valor separate

Agora na tabela todas as bordas são duplas (a borda é definida tanto para as células quanto para a própria tabela):

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Exemplo . Valor separate

Agora a borda é definida para as células, mas não é definida para a própria tabela. Onde duas células têm uma borda comum, - as bordas serão duplas, nos outros lugares - simples:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Exemplo . Valor collapse

Agora na tabela todas as bordas se colapsarão e passarão a parecer com espessura de 1px, como era desejado:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: