CSS border-collapse

Please Share On:

Definition:

CSS border-collapse is used to style the border. Today, I am going to show how can we use CSS border-collapse in a table. CSS border-collapse can be defined as 4 different values: separate | collapse | initial | inherit.

Let’s see an example of each border-collapse with different values.

Values	Description
Separate	This is the default value of CSS border-collapse. Here, each cell displays its own border.
Collapse	Borders are collapsed into a single border.
Initial	Match the properties to the initial value.
Inherit	Inherit this property from its parent element.

Syntax:

  border-collapse: separate;
  border-collapse: collapse;
  border-collapse: initial;
  border-collapse: inherit;

Let’s see an example in the following table.

Employee ID	Firstname	Lastname
1000	Max	Sharma
1001	Lily	Cook

1. border-collapse: separate;

Syntax:

#table-value {
  border-collapse: seperate;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  display: inline-table;
  border: dotted 5px;
}

table th, td {
  border: solid 1px;
}

#table-value{
  border-collapse: separate;
}
</style>
</head>
<body>
<table id="table-value">
  <tr>
    <th>Employee ID</th>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>1000</td>
    <td>Max</td>
    <td>Sharma</td>
  </tr>
<tr>
    <td>1001</td>
    <td>Lily</td>
    <td>Cook</td>
  </tr>
</table>
</body>
</html>

Output:

try it yourself

2. border-collapse: collapse;

Employee ID	Firstname	Lastname
1000	Max	Sharma
1001	Lily	Cook

Syntax:

#table-value {
  border-collapse: collapse;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  display: inline-table;
  border: dotted 5px;
}

table th, td {
  border: solid 1px;
}

#table-value {
  border-collapse: collapse;
}
</style>
</head>
<body>


<table id="table-value">
  <tr>
    <th>Employee ID</th>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>1000</td>
    <td>Max</td>
    <td>Sharma</td>
  </tr>
<tr>
    <td>1001</td>
    <td>Lily</td>
    <td>Cook</td>
  </tr>
</table>
</body>
</html>

Output:

try it yourself

3. border-collapse: initial:

Employee ID	Firstname	Lastname
1000	Max	Sharma
1001	Lily	Cook

Syntax:

#table-value {
  border-collapse: initial;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid red;
}

#table-value {
  border-collapse: initial;
}
</style>
</head>
<body>
<br/>
<table id="table-value">
  <tr>
    <th>Employee ID</th>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>1000</td>
    <td>Max</td>
    <td>Sharma</td>
  </tr>
<tr>
    <td>1001</td>
    <td>Lily</td>
    <td>Cook</td>
  </tr>
</table>
</body>
</html>

Output:

try it yourslef

4. border-collapse: inherit:

Employee ID	Firstname	Lastname
1000	Max	Sharma
1001	Lily	Cook

Syntax:

#table-value {
  border-collapse: inherit;
}

<!DOCTYPE html>
<html>
<head>
<style>
table {
  display: inline-table;
  border: dotted 5px;
}

table th, td {
  border: solid 1px;
}


#table-value {
  border-collapse: inherit;
}
</style>
</head>
<body>
<br/>
<table id="table-value">
  <tr>
    <th>Employee ID</th>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>1000</td>
    <td>Max</td>
    <td>Sharma</td>
  </tr>
<tr>
    <td>1001</td>
    <td>Lily</td>
    <td>Cook</td>
  </tr>
</table>
</body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 566

Definition:

Syntax:

1. border-collapse: separate;

Output:

2. border-collapse: collapse;

3. border-collapse: initial:

4. border-collapse: inherit:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.