CSS/Properties/border-collapse
From Web Education Community Group
< CSS | Properties
- List of Properties
- Table
- caption-side
- table-layout
- border-collapse
- border-spacing
- empty-cells
- Table
Contents |
border-collapse
The border-collapse property selects a table's border model(separated or collapsing).
Description
| Values | collapse | separate | inherit |
|---|---|
| Initial value | separate |
| Applies to | 'table' and 'inline-table' elements |
| Inherited | Yes |
Values
collapse
Selects the separated borders border model.
separate
Selects the collapsing borders model.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
table{
border-width: 1px;
border-style: solid;
width: 400px;
}
#col{
border-collapse: collapse;
margin-bottom: 20px;
}
#sep{
border-collapse: separate;
}
tr, th, td{
border-width:1px;
border-style: solid;
}
[index.html]
<body>
<table id="col">
<caption>Example 1. collapse</caption>
<tr>
<th>Values</th>
<td>top | bottom | inherit</td>
</tr>
<tr>
<th>Initial value</th>
<td>top</td>
</tr>
<tr>
<th>Applies to</th>
<td>table-caption elements</td>
</tr>
<tr>
<th>Inherited</th>
<td>Yes</td>
</tr>
</table>
<table id="sep">
<caption>Example 2. separate</caption>
<tr>
<th>Values</th>
<td>top | bottom | inherit</td>
</tr>
<tr>
<th>Initial value</th>
<td>top</td>
</tr>
<tr>
<th>Applies to</th>
<td>table-caption elements</td>
</tr>
<tr>
<th>Inherited</th>
<td>Yes</td>
</tr>
</table>
</body>
CSS Reference
The CSS specification defines the border-collapse property in 17.6 Borders.
