border-collapse Archives

The CSS border-collapse property sets whether table borders should collapse into a single border or be separated (default HTML).

Demo:

Click the “Try it” button to change the border-collapse: separate; to the border-collapse: collapse;

Country:	Capital:
Japan	Tokyo
China	Beijing
UK	London

Syntax:

border-collapse: separate|collapse;

separate (default) – each cell displays its own borders.

collapse – borders are collapsed into a single border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
    
table, td, th {
  border: 3px solid #333;
}

#table1 {
  border-collapse: collapse;
  border-color: #2a9d8f;
}

#table2 {
  border-collapse: separate;
  border-color: #2a9d8f;
}
</style>
</head>
<body>

<h4>border-collapse: collapse;</h4>
<table id="table1">
  <tr>
    <th>Country:</th>
    <th>Capital:</th>
  </tr>
  <tr>
    <td>Japan</td>
    <td>Tokyo</td>
  </tr>
  <tr>
    <td>China</td>
    <td>Beijing</td>
  </tr>
</table>

<h4>border-collapse: separate;</h4>
<table id="table2">
  <tr>
    <th>Country:</th>
    <th>Capital:</th>
  </tr>
  <tr>
    <td>Japan</td>
    <td>Tokyo</td>
  </tr>
  <tr>
    <td>China</td>
    <td>Beijing</td>
  </tr>
</table>
</body>
</html>

Output:

border-collapse: collapse;

Country:	Capital:
Japan	Tokyo
China	Beijing

border-collapse: separate;

Country:	Capital:
Japan	Tokyo
China	Beijing

Enjoy coding!