CSS - border-collapse


Advertisements


Description

border-collapse determines the border model used in the rendering of a table.

Possible Values

  • collapse − Borders are collapsed to make a single border. Two adjacent cells will share a border.

  • separate − Borders are separated. Every cell has its own border, and none of these borders are shared with other cells in the table.

Applies to

Elements with a display of table or inline-table.

DOM Syntax

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

Example

Following is the example to show both values −

<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>

This will produce following result −