Definition:
CSS collapse table border properties specify the table border should collapse or not. See below the example of collapse table borders.
Syntax:
border-collapse: collapse;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px dashed red;
}
</style>
</head>
<body>
<h3>Example of CSS Collapse border table </h3>
<table>
<tr>
<th>Roll No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Hobby</th>
</tr>
<tr>
<td>1.</td>
<td>Harry</td>
<td>Potter</td>
<td>Acting</td>
</tr>
<tr>
<td>2.</td>
<td>Brad</td>
<td>Pitt</td>
<td>Acting</td>
</tr>
<tr>
<td>3.</td>
<td>David</td>
<td>Warner</td>
<td>Sports</td>
</tr>
</table>
</body>
</html>
Output:
Difference between CSS Table Borders and CSS Collapse Table Borders
See the below output of CSS table borders and CSS collapse table borders for better understanding.
You may be interested in the following topics:
- CSS Striped Tables
- CSS Hoverable Tables
- CSS Vertical Dividers
- CSS Horizontal Dividers
- CSS Vertical Alignment
- CSS Horizontal Alignment
- CSS Table Color
- CSS Table Padding
- CSS Table Height
- CSS Table Width
- CSS Collapse Table Borders
- CSS Table Borders
- CSS Table (All Properties)