CSS colapso da fronteira

Código CSS:
Aplicamos algumas propriedades no cabeçalho para tornar nosso cabeçalho mais atraente. Mudamos sua “família de fontes” e o definimos como “Arial”. O estilo deste texto de título é "itálico" e a cor deste título é "azul". Agora, prosseguimos para a tabela e colocamos a borda da tabela como "1px" em largura, "sólido" no tipo e "preto" em cores. O conceito principal é usado aqui que é "colapso da fronteira". Usamos esta propriedade e definimos este "colapso da fronteira" para "colapso".

Saída:
Vamos dar uma olhada na seguinte imagem na qual a saída é mostrada. Você pode ver que a borda da tabela é solteira.

Exemplo #2
Nesse caso, editamos a tabela anterior um pouco. Aqui, adicionamos mais duas colunas à tabela anterior e usamos a propriedade "Border-Collapse" novamente nesta nova tabela.

Código CSS:
No Código CSS, usamos outra propriedade que é a propriedade "espaçamento de fronteira". Você verá se isso afeta a borda da tabela ou não quando usamos a propriedade "colapso da fronteira" junto com esta propriedade.

Editamos a “família da fonte” do título. Desta vez, usamos "calibri" como a "família da fonte" do cabeçalho. A "cor" que usamos aqui para o título é "vermelho". Agora, aplique a propriedade "fronteira" novamente para a mesa, célula e o cabeçalho da tabela. A borda de todas essas propriedades está definida como "2px", com um tipo "sólido" e cor "verde". A propriedade "colapso da fronteira" está definido como "colapso". Em seguida, usamos o "espaçamento da borda" para dar espaço entre a borda da tabela e as células da tabela. Nós o definimos como “20px”.

Saída:

Aqui, a saída não mostra diferença na borda das tabelas e células. Parece o mesmo que na ilustração anterior. Isso significa que a propriedade de "espaçamento entre borda" não altera o espaço de borda da tabela porque usamos a propriedade "colapso da fronteira" nesta tabela junto com a propriedade "espaçamento de borda".

Exemplo #3
Aqui, criamos duas tabelas diferentes da mesma maneira que discutidas anteriormente em nosso primeiro exemplo. Criamos duas tabelas para que possamos aprender como essa propriedade de "colapso da fronteira" funciona de maneira diferente da propriedade de fronteira "separada".

Código CSS:
A “família de fontes” do cabeçalho é “Times New Roman” com uma cor “azul”. A "borda" de ambas as tabelas é definida como a cor "laranja" e "2px" do tipo "sólido". Usamos a propriedade "colapso da fronteira" na Tabela 1. Também usamos o outro "colapso da fronteira" na Tabela 2, mas desta vez, definimos essa propriedade como "separada".

Saída:
Aqui, temos duas tabelas na saída. A primeira borda da tabela é a mesma que em nossos exemplos anteriores. Mas a segunda borda da tabela é diferente porque usamos o "separado" com o "colapso da fronteira". A borda da tabela é separada da borda das células em uma tabela.

Exemplo #4
Aqui, temos duas mesas novamente que projetamos no Exemplo 3. Agora, mudamos alguns estilos dessas tabelas, usamos a propriedade "espaçamento de borda" em ambas as tabelas e verificamos a diferença nas duas tabelas.

Desta vez, a "família" do cabeçalho é "argeliana" e a cor é "marrom". A borda da tabela é "magenta" em cor. A Tabela Um usa o "colapso" com o "colapso da fronteira" com um "espaçamento de fronteira" de "10px". Para a Tabela Dois, usamos uma borda "separada" e o "espaçamento entre borda" também é "10px". A saída mostrará a diferença.

Saída:
Na saída, você pode ver facilmente a diferença entre a Tabela Um e a Tabela Dois. Isso mostra que quando usamos o "colapso da borda: borda", o "espaçamento da borda" não afeta a tabela. Mas quando usamos o “colapso da borda: separado”, podemos definir o espaçamento da borda entre as células e a borda da tabela de acordo com a nossa escolha.

Exemplo #5
Aqui, aplicamos as três propriedades da borda da tabela. Primeiro, usamos a propriedade "colapso da fronteira" na Tabela 1, que é definida como "colapso". Na segunda propriedade, mudamos a cor da fronteira para "verde do mar médio". Na terceira propriedade, usamos o "espaço de borda: 10px". Depois disso, usamos as mesmas propriedades na Tabela 2, mas usamos o "separado" em vez de "colapso" na propriedade "colapso da fronteira". Além disso, definimos a cor da borda como "roxa" e usamos o mesmo "espaço de borda". Agora, veja como funciona.

Não há mudança na Tabela 1. Não há espaçamento entre a borda da tabela e as células. A cor da tabela é a mesma. A propriedade "Border-Color" não afeta a tabela, pois usamos a borda "colapso" na Tabela 1. Mas na Tabela 2, você pode ver que a cor da borda da tabela e a borda da célula são diferentes. Além disso, há um espaçamento de "10px" entre a borda da célula e a borda da mesa.

Conclusão

Neste tutorial, usamos a propriedade "colapso da fronteira" e aprendemos a diferença quando usamos "separado" e "colapso" com a propriedade "colapso da fronteira". Também somos mostrados a saída na qual a diferença em "separada" e "colapso" é visível. Você pode facilmente obter esse conceito de como as duas propriedades são diferentes uma da outra. Você aprendeu o que acontece quando usamos a propriedade "separada" e "colapso" com a propriedade "Border-Collapse" no CSS.

• « CSS Att
• Propriedade do CSS Border-Left »