From c2d1b8b56c5a9f45f5ea9f5471c87d1b904f9087 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Oct 2021 00:25:17 +0900 Subject: CSS Table 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/28 時点の英語版に同期 --- files/ja/web/css/border-collapse/index.md | 160 ++++++++++++++---------------- 1 file changed, 76 insertions(+), 84 deletions(-) (limited to 'files/ja/web/css/border-collapse') diff --git a/files/ja/web/css/border-collapse/index.md b/files/ja/web/css/border-collapse/index.md index 7de69d0f6f..588bd841b0 100644 --- a/files/ja/web/css/border-collapse/index.md +++ b/files/ja/web/css/border-collapse/index.md @@ -3,80 +3,90 @@ title: border-collapse slug: Web/CSS/border-collapse tags: - CSS - - CSS Reference + - CSS 境界 + - CSS プロパティ + - CSS 表 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-collapse translation_of: Web/CSS/border-collapse --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の border-collapse プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。

+**`border-collapse`** は [CSS](/ja/docs/Web/CSS) のプロパティで、表 ({{htmlElement("table")}}) の中のセルが境界を共有するか分離するかを設定します。 -
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+{{EmbedInteractiveExample("pages/css/border-collapse.html")}} - +セルが折り畳まれている場合 (collapse)、 {{cssxref("border-style")}} の値で `inset` が `groove` のように動作し、 `outset` が `ridge` のように動作します。 -

セルが collapsed の場合、 {{cssxref("border-style")}} の値で inset が groove のように動作し、 outset が ridge のように動作します。

+セルが分離されている場合 (separate)、セル間の距離は {{cssxref("border-spacing")}} プロパティで定義されます。 -

セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-collapse: collapse;
 border-collapse: separate;
 
 /* グローバル値 */
 border-collapse: inherit;
 border-collapse: initial;
+border-collapse: revert;
 border-collapse: unset;
-
+``` + +`border-collapse` プロパティは、以下のリストから選択された単一のキーワードで指定します。 -

border-collapse プロパティは、以下のリストから選択された単一のキーワードで指定します。

+### 値 -

値

+- `collapse` + - : 隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。 +- `separate` + - : 隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。 -
-
collapse
-
隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
-
separate
-
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。
-
+## 公式定義 -

形式文法

+{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

- -

ブラウザーエンジンのカラフルな表

- -

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>
- -

CSS

- -
.collapse {
+## 例
+
+
ブラウザーエンジンのカラフルな表

+
+#### HTML
+
+```html
+
+  
+  
+    
+    
+    
+    
+    
+    
+  
+
border-collapse: separate
Browser Layout Engine
Firefox Gecko
Edge EdgeHTML
Safari Webkit
Chrome Blink
Opera Blink

+
+  
+  
+    
+    
+    
+    
+    
+    
+  
+
border-collapse: collapse
Browser Layout Engine
Firefox Gecko
Edge EdgeHTML
Safari Webkit
Chrome Blink
Opera Blink

+```
+
+#### CSS
+
+```css
+.collapse {
   border-collapse: collapse;
 }
 
@@ -103,40 +113,22 @@ table td {
 .wk { border-color: gold blue; }
 .ch { border-color: red yellow green blue; }
 .bk { border-color: navy blue teal aqua; }
-.op { border-color: red; }
- -

結果

- -

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}初回定義
+.op { border-color: red; } +``` + +#### 結果 + +{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }} + +## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.border-collapse")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("border-spacing")}}, {{cssxref("border-style")}} +- `border-collapse` プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。 -- cgit v1.2.3-54-g00ecf