blob: fe63fa4b535862b802fcf1ae0f2d881b6ba7816a (
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
|
---
title: border-collapse
slug: Web/CSS/border-collapse
tags:
- CSS
- CSS Borders
- CSS Property
- CSS Tables
- Reference
translation_of: Web/CSS/border-collapse
---
<div>{{CSSRef}}</div>
<p><strong><code>border-collapse</code></strong> CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.</p>
<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
<p>분리(<em>separated</em>) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 {{ Cssxref("border-spacing") }} 속성에 의해 주어집니다.</p>
<p>상쇄(<em>collapsed</em>) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, <code>inset</code>의 {{ Cssxref("border-style") }} 값은 <code>groove</code>처럼, <code>outset</code>은 <code>ridge</code>처럼 행동합니다.</p>
<h2 id="구문">구문</h2>
<pre class="brush: css">/* Keyword values */
border-collapse: collapse;
border-collapse: separate;
/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;</pre>
<h3 id="값">값</h3>
<dl>
<dt><code>separate</code></dt>
<dd>분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.</dd>
<dt><code>collapse</code></dt>
<dd>상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.</dd>
</dl>
<h3 id="형식_구문">형식 구문</h3>
{{csssyntax}}
<h2 id="예제">예제</h2>
<h3 id="A_colorful_table_of_browser_engines" name="A_colorful_table_of_browser_engines">브라우저 엔진의 다색 표</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="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></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>
|
