这篇文章需要文法复核。如何帮忙。
概述
border-collapse
CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。
分隔(separated)模式是HTML表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing
来确定的。
合并(collapsed )模式下,表格相邻单元格共享边框。在这种模式下,CSS属性border-style
的值inset表现为槽,值groove表现为脊。
初始值 | separate |
---|---|
适用元素 | table and inline-table elements |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | as specified |
是否适用于 CSS 动画 | 否 |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
border-collapse: collapse; border-collapse: separate; border-collapse: inherit;
值
separate
- 关键字,用于使用分隔的边框来绘制表格,是默认值。
collapse
- 关键字,用于使用合并的边框来绘制表格。
正式语法
collapse | separate
示例
查看独立的例子
各浏览器引擎下的一个多彩表格
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; }
结果
特性
特性 | 状态 | 注释 |
---|---|---|
CSS Level 2 (Revision 1) border-collapse |
Recommendation | 初始定义 |
浏览器兼容性
特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基础支持 | 1.0 | 1.0 (1.7 or earlier) | 5.0 | 4.0 | 1.2 (125) |
特性 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基础支持 | 2.3 | 1.0 (1.9.2) | 7.0 | 11 | 3.0 |