A border-collapsepropriedade é para uso em
display: table display: inline-table
separate(padrão) - em que todas as células da tabela têm suas próprias bordas independentes e pode haver espaço entre essas células também.collapse- em que o espaço e as bordas entre as células da tabela são recolhidos, de forma que há apenas uma borda e nenhum espaço entre as células.
Quando border-collapseé collapse, é notável que propriedades como border-spacinge border-radius(nas bordas reais) não fazem nada. Você precisará border-collapse: separate;se precisar de qualquer uma dessas coisas.
Aqui está um exemplo onde você pode alternar entre os dois:
Veja a
tabela de canetas com células arredondadas de Chris Coyier (@chriscoyier)
no CodePen.
Suporte para navegador
elementos (ou elementos feitos para se comportar como uma mesa por meio de ou). Existem dois valores:| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Funciona | Funciona |