273 views
CSS Border Collapse
The CSS border-collapse property is used to specify whether the borders of adjacent table cells should be collapsed into a single border or kept separate. The border-collapse property only applies to table elements.
The border-collapse property accepts two values:
collapse: adjacent table cells share borders, creating a single border between them.separate: each table cell has its own individual border.
Here’s an example of using the border-collapse property to collapse the borders of adjacent table cells:
CSS
table {
border-collapse: collapse;
}HTML
<div>
<p>In this example, the <code>border-collapse</code> property is set to <code>collapse</code>, which means that the borders of adjacent table cells will be collapsed into a single border.</p>
<p>On the other hand, if you want to keep the borders of adjacent table cells separate, you can use the <code>border-collapse</code> property with the value of <code>separate</code>, like this:</p>
</div>CSS
table {
border-collapse: separate;
}HTML
<div>
By using the <code>border-collapse</code> property, you can control the way the borders of adjacent table cells are displayed, allowing you to create a clean and organized look for your HTML tables.
</div>