CSS - colapso de bordes

Descripción

border-collapse determina el modelo de borde utilizado en la representación de una tabla.

Valores posibles

collapse- Los bordes se contraen para formar un solo borde. Dos celdas adyacentes compartirán un borde.
separate- Las fronteras están separadas. Cada celda tiene su propio borde y ninguno de estos bordes se comparte con otras celdas de la tabla.

Se aplica a

Elementos con display de mesa o inline-table.

Sintaxis DOM

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

Ejemplo

A continuación se muestra el ejemplo para mostrar ambos 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>

Esto producirá el siguiente resultado:

↰ Previous page