CSS border-collapse

The CSS border-collapse property is used when we need to collapse the table border into a single border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      table, td{border: 1px solid;}
      table#two {border-collapse: collapse;}
   </style>
</head>
<body>

   <h2>Table without border-collapse</h2>
   <table id="one">
      <tr>
         <td>table data 1</td>
         <td>table data 2</td>
      </tr>
      <tr>
         <td>table data 3</td>
         <td>table data 4</td>
      </tr>
   </table>

   <h2>Table with border-collapse</h2>
   <table id="two">
      <tr>
         <td>table data 1</td>
         <td>table data 2</td>
      </tr>
      <tr>
         <td>table data 3</td>
         <td>table data 4</td>
      </tr>
   </table>

</body>
</html>

Output

Table without border-collapse

table data 1	table data 2
table data 3	table data 4

Table with border-collapse

table data 1	table data 2
table data 3	table data 4

CSS border-collapse Syntax

The syntax of border-collapse in CSS, is:

border-collapse: value;

The value should be any of the following:

collapse - used to collapse the border
separate - used to separate the border. This is the default one
initial - used to set the default value
inherit - used to inherit the value from its parent

CSS Online Test

« Previous Tutorial Next Tutorial »