blob: 7de69d0f6f5cec9c6d1c6e8bf2976cde21b8dcb6 (
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
|
---
title: border-collapse
slug: Web/CSS/border-collapse
tags:
- CSS
- CSS Reference
translation_of: Web/CSS/border-collapse
---
<div>{{CSSRef}}</div>
<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>border-collapse</code> プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。</p>
<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>セルが collapsed の場合、 {{cssxref("border-style")}} の値で <code>inset</code> が <code>groove</code> のように動作し、 <code>outset</code> が <code>ridge</code> のように動作します。</p>
<p>セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css no-line-numbers">/* キーワード値 */
border-collapse: collapse;
border-collapse: separate;
/* グローバル値 */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
</pre>
<p><code>border-collapse</code> プロパティは、以下のリストから選択された単一のキーワードで指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>collapse</code></dt>
<dd>隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。</dd>
<dt><code>separate</code></dt>
<dd>隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</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="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 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; }</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p>
<h2 id="Specifications" name="Specifications">仕様書</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>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{Compat("css.properties.border-collapse")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}</li>
<li><code>border-collapse</code> プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。</li>
</ul>
|
