Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите закончить эту работу!
Summary
The border-collapse
CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.
The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing
property.
In the collapsed border model, adjacent table cells share borders. In that model, the border-style
value of inset
behaves like groove
, and outset
behaves like ridge
.
Initial value | separate |
---|---|
Applies to | table and inline-table elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
border-collapse: collapse; border-collapse: separate; border-collapse: inherit;
Values
separate
- Is a keyword requesting the use of the separated-border table rendering model. It is the default value.
collapse
- Is a keyword requesting the use of the collapsed-border table rendering model.
Formal syntax
collapse | separate
Examples
View a standalone example
A colorful table of browser engines
HTML
<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="ie">Internet Explorer</td> <td class="tr">Trident</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="ie">Internet Explorer</td> <td class="tr">Trident</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>
CSS
.collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 6px; border-width: 6px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ie { 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; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of 'border-collapse' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 5.0 | 4.0 | 1.2 (125) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.3 | 1.0 (1.9.2) | 7.0 | 11 | 3.0 |
Метки документа и участники
Метки:
Внесли вклад в эту страницу:
Sebastianz,
fscholz,
jsx,
teoli,
J-Mackerel,
SiddharthBhatt,
kscarfone,
Sheppy,
trevorh,
ethertank,
Rowno,
Jürgen Jeka,
BijuGC,
Mgjbot,
Nathymig,
Fredchat,
Backinblakk
Обновлялась последний раз:
Sebastianz,