Set the CSS border-collapse model for two tables:
#table1 {
border-collapse: separate;
}#table2 {
border-collapse: collapse;
}
More “Try it Yourself” examples below.
Definition and Usage
The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.
| Default value: | separate |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.borderCollapse=”collapse” Try it |
CSS Syntax
border-collapse: separate|collapse|initial|inherit;
Property Values
| Value | Description | Code |
|---|---|---|
| separate | Borders are separated; each cell will display its own borders. This is default. | table#myTable { border-collapse:separate; } |
| collapse | Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) | table#myTable { border-collapse:collapse ; } |
| initial | Sets this property to its default value. Read about initial | table#myTable { border-collapse:initial; } |
| inherit | Inherits this property from its parent element. Read about inherit |
Example
When using “border-collapse: separate”, the border-spacing property can be used to set the space between the cells:
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
Example
When using “border-collapse: collapse”, the cell that appears first in the code will “win”:
table, td, th {
border: 3px solid red;
}#table1 {
border-collapse: collapse;
border-color: blue;
}
