/    /  CSS border-collapse

CSS border-collapse

 

This CSS property is used to set the border of the table cells and specifies whether the table cells share a separate or common border.

This CSS property has two main values that are separate and collapse.

 

Syntax:

 

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

 

Property Values:

 

separate: Separate is the default value that separates the border of the table cell. Using this value, every cell will display its own border.

collapse: Collapse the borders into a single border. Using this, 2 adjacent table cells will share a border.

initial: It initially sets the property to its default value.

inherit: The property from its parent element.

 

Example – Using separate value:

 

Border-spacing property to set the distance between the adjacent table cells.

 

Example:

 

<!DOCTYPE html>
<html>

<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: #00cca3;
}
td{
border: 5px solid violet;
background-color: #6600cc;
}
#t1 {
border-collapse: separate;
}
</style>
</head>

<body>

<h1> The border-collapse Property </h1>
<h2> border-collapse: separate; </h2>
<table id = "t1">
<tr>
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Name1  </td>
<td> Maths </td>
<td> 59 </td>
</tr>
<tr>
<td> Name2 </td>
<td> Maths </td>
<td> 69 </td>
</tr>
<tr>
<td> Name3 </td>
<td> Maths </td>
<td> 68 </td>
</tr>
</table>
</body>

</html>

 

OUTPUT:

 

CSS border-collapse

 

Example – Using collapse property:

 

border-spacing and border-radius properties cannot be used with this value.

 

Example

 

<!DOCTYPE html>
<html>

<head>
<title> border-collapse property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
width: 80%;
height: 50%;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#t1{
border-collapse: collapse;
}
</style>
</head>

<body>

<h1> The border-collapse Property </h1>
<h2> border-collapse: collapse; </h2>
<table id = "t1">
<tr>
<th> Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> Name1 </td>
<td> Maths </td>
<td> 42 </td>
</tr>
<tr>
<td> Name2 </td>
<td> Maths </td>
<td> 79 </td>
</tr>
<tr>
<td> Name3 </td>
<td> Maths </td>
<td> 62 </td>
</tr>
</table>
</body>
</html>

 

OUTPUT:

 

CSS border-collapse