blob: 0f251e2cf7a82900727372d03fd5a7492fe9dde7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: border-collapse
slug: Web/CSS/border-collapse
tags:
- CSS
- CSS 属性
- 参考
- 表格
- 边框
translation_of: Web/CSS/border-collapse
---
<div>{{CSSRef}}</div>
<p><strong><code>border-collapse</code></strong> <a href="/zh-CN/docs/CSS">CSS</a> 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。</p>
<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
<p>合并（<em>collapsed</em> ）模式下，表格中相邻单元格共享边框。在这种模式下，CSS属性{{ Cssxref("border-style") }} 的值 inset 表现为槽，值 outset 表现为脊。</p>
<p>分隔（<em>separated）</em>模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 {{cssxref("border-spacing")}} 来确定的。</p>
<h2 id="语法">语法</h2>
<pre class="brush: css no-line-numbers">/* Keyword values */
border-collapse: collapse;
border-collapse: separate;
/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
</pre>
<p><code>border-collapse</code> 的属性值被定义为一个单独的关键词，可为下面两个值中的一个。</p>
<h3 id="值">值</h3>
<dl>
<dt><code>collapse</code></dt>
<dd>相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。</dd>
<dt><code>separate</code></dt>
<dd>默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="查看独立的例子">查看独立的例子</h3>
<p><a href="/samples/cssref/border-collapse.html">查看在线演示</a></p>
<h3 id="各个浏览器引擎的多彩表格">各个浏览器引擎的多彩表格</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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="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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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; }</pre>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.border-collapse")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("border-spacing")}}、{{cssxref("border-style")}}</li>
<li>The <code>border-collapse</code> property alters the appearance of the {{htmlelement("table")}} HTML element.</li>
</ul>
|
