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: