CSS border-collapse property

Property values

CSS border-collapse property defines whether to separate or collapse the borders of table cells. It is important to note that it applies to table element and not to the td or tr elements.

Syntax

border-collapse : separate | collapse

Property values

separateDefault: There is space between the borders of table cells.; border-collapse: separate;
Try it
collapse: It collapses the borders of table cells i.e. there is no space between the cells in a table.; border-collapse: collapse;
Try it

Applicable to

It applies to table element.

Preview

Code

CSS

.element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}
table td, table th{
border:1px solid rgba(230,230,230,1);	
}

HTML

<table class="designTable">
<caption class="caption">Score</caption>
<tr>
<th>Name</th>
<th>Aggregate</th>
<th>Degree</th>
</tr>
<tr>
<th>Sheraz</th>
<td>70%</td>
<td>BSC</td>
</tr>
<tr>
<th>Bilal</th>
<td>80%</td>
<td>BIT</td>
</tr>

<tr>
<th>Aleem</th>
<td>90%</td>
<td>BSE</td>
</tr>
</table>

CSS3 Properties

Property values

Syntax

Property values

Applicable to