The border-collapse
CSS property sets whether cells inside a <table>
have shared or separate borders.
When cells are collapsed, the border-style
value of inset
behaves like groove
, and outset
behaves like ridge
.
When cells are separated, the distance between cells is defined by the border-spacing
property.
/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset;
The border-collapse
property is specified as a single keyword, which may be chosen from the list below.
collapse
separate
collapse | separate
<table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>Browser</th> <th>Layout Engine</th></tr> <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr> <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr> <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr> <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr> <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>Browser</th> <th>Layout Engine</th></tr> <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr> <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr> <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr> <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr> <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr> </tbody> </table>
.collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; }
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of 'border-collapse' in that specification. | Recommendation | Initial definition |
Initial value | separate |
---|---|
Applies to |
table and inline-table elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 5 | 4 | 1.2 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 2.3 | ? | Yes | 4 | 11 | 3 | ? |
border-spacing
, border-style
border-collapse
property alters the appearance of the <table>
HTML element.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse