Advertisements
How to remove cellspacing from tables using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS border-collapse property
By default, there is some space between the borders of adjacent table cells, because the default border modal for the HTML tables is separated. But, you can overwrite this and create a table with collapsed border without any cellspacing by simply setting the CSS border-collapse property value for the <table> element to collapse, as shown in the example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Cellspacing in CSS</title>
<style>
table{
border-collapse: collapse; /* Remove cell spacing */
}
table, th, td{
border: 1px solid #666;
}
table th, table td{
padding: 10px; /* Apply cell padding */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to set table cellpadding and cellspacing in CSS
- How to highlight alternate table row using CSS
- How to remove white space underneath an image using CSS
Advertisements
