CSS - border-collapse

Descrição

border-collapse determina o modelo de borda usado na renderização de uma tabela.

Valores possíveis

collapse- As bordas são reduzidas para formar uma única borda. Duas células adjacentes compartilharão uma borda.
separate- As fronteiras são separadas. Cada célula tem sua própria borda e nenhuma dessas bordas é compartilhada com outras células na tabela.

Aplica-se a

Elementos com exibição de mesa ou mesa embutida.

Sintaxe DOM

object.style.borderCollapse = "Any of the two values";

Exemplo

A seguir está o exemplo para mostrar os dois valores -

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page