Propriedade de recolhimento de borda CSS
Exemplo
Defina o modelo de bordas recolhidas para duas tabelas:
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A border-collapse
propriedade define se as bordas da tabela devem ser recolhidas em uma única borda ou separadas como no HTML padrão.
Valor padrão: | separado |
---|---|
Herdado: | sim |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS2 |
Sintaxe JavaScript: | objeto .style.borderCollapse="recolher" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
Sintaxe CSS
border-collapse: separate|collapse|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
separate | Borders are separated; each cell will display its own borders. This is default. | |
collapse | Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Ao usar "border-collapse: separar", a propriedade border-spacing pode ser usada para definir o espaço entre as células:
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
Exemplo
Ao usar "border-collapse: recolher", a célula que aparece primeiro no código "ganhará":
table, td, th {
border: 3px solid red;
}
#table1 {
border-collapse:
collapse;
border-color: blue;
}
Páginas relacionadas
Tutorial CSS: Tabela CSS
Referência HTML DOM: propriedade borderCollapse