diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-29 00:43:43 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-06 22:18:08 +0900 |
| commit | 647f2074063d41b629dfab8a38496793512fe635 (patch) | |
| tree | 42dd9e88fde3f431cff3e706efe64ebec0dcdceb /files/ja/web/css/border-collapse/index.html | |
| parent | efb4cbf976d6b15ec9ea59dd13f0943fcbfdecbb (diff) | |
| download | translated-content-647f2074063d41b629dfab8a38496793512fe635.tar.gz translated-content-647f2074063d41b629dfab8a38496793512fe635.tar.bz2 translated-content-647f2074063d41b629dfab8a38496793512fe635.zip | |
CSS Table 関係の文書の変換準備
Diffstat (limited to 'files/ja/web/css/border-collapse/index.html')
| -rw-r--r-- | files/ja/web/css/border-collapse/index.html | 142 |
1 files changed, 0 insertions, 142 deletions
diff --git a/files/ja/web/css/border-collapse/index.html b/files/ja/web/css/border-collapse/index.html deleted file mode 100644 index 7de69d0f6f..0000000000 --- a/files/ja/web/css/border-collapse/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -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> |
