CSS - border-collapse



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>
   div {
      padding: 15px;
   }

   table.one {border-collapse:collapse;}
   table.two {border-collapse:separate;}
   
   td.a { 
      border-style:dotted; 
      border-width:3px; 
      border-color:#000000; 
      padding: 10px;
      background-color: aquamarine;
   }
   td.b {
      border-style:solid; 
      border-width:3px; 
      border-color:#333333; 
      padding:10px;
      background-color: thistle;
   }
</style>
</head>
<body>
   <div>
   <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>
   </div>
   <div>
   <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>
   </div>
</body>
</html>
Advertisements