The border-collapse
property in CSS is used to control the border model for table elements. It determines whether adjacent table cell borders and spacing should be collapsed into a single border or if they should be kept separate.
Note: The border-collapse
property can take values like collapse
and separate
.
Syntax:
/* Collapsing table borders and spacing */
table {
border-collapse: collapse;
}
Features:
-
border-collapse
Property:-
collapse
: Collapses adjacent table cell borders and spacing into a single border. This is the default value. -
separate
: Keeps the borders and spacing of adjacent table cells separate.
-
-
Affects Border Style: The
border-collapse
property affects the rendering of borders, especially when styling individual cells. -
Cross-Browser Compatibility: While most modern browsers support
border-collapse
, it’s advisable to test and ensure consistent rendering across different browsers.