aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/compatibility_faq/broken_table_layout.html/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:07:59 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:07:59 +0100
commit6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch)
tree890e3e27131be010d82ef957fa68db495006cb0e /files/ja/web/compatibility_faq/broken_table_layout.html/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz
translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2
translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip
unslug ja: move
Diffstat (limited to 'files/ja/web/compatibility_faq/broken_table_layout.html/index.html')
-rw-r--r--files/ja/web/compatibility_faq/broken_table_layout.html/index.html67
1 files changed, 0 insertions, 67 deletions
diff --git a/files/ja/web/compatibility_faq/broken_table_layout.html/index.html b/files/ja/web/compatibility_faq/broken_table_layout.html/index.html
deleted file mode 100644
index 32dc4a39a4..0000000000
--- a/files/ja/web/compatibility_faq/broken_table_layout.html/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: テーブルのレイアウトが崩れている
-slug: Web/Compatibility_FAQ/Broken_Table_Layout.html
-tags:
- - Compatibility
- - Layout
----
-<h2 id="概要">概要</h2>
-
-<p> テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。</p>
-
-<div style=""><img alt="" src="https://mdn.mozillademos.org/files/9963/0107_1.jpg" style="width: 266px; height: 500px; margin-right: 10px; margin-left: 10px;">  <img alt="" src="https://mdn.mozillademos.org/files/9965/0107_2.jpg" style="width: 271px; height: 500px; margin-right: 10px; margin-left: 10px;"></div>
-
-<p>左:Firefox 右:他ブラウザ</p>
-
-<h2 id="要因">要因</h2>
-
-<p> 要因の代表例として以下があります。</p>
-
-<ol>
- <li>
- <p><strong>テーブルのセル幅の未指定</strong></p>
-
- <p> テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。</p>
-
- <pre><code><font size="3">  #maincontent section.category .list div{
- display: table;
- width: 100%;
- border-top: #b2b2b2 1px solid;
-  } </font></code></pre>
-
- <p> 上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。<br>
-  </p>
- </li>
-</ol>
-
-<h2 id="解決策">解決策</h2>
-
-<p> 解決策の代表例として以下があります。</p>
-
-<ol>
- <li>
- <p><strong>テーブルのセル幅の未指定</strong></p>
-
- <p>テーブルの配置指定に <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; を適用させます。<br>
- <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; の指定により、横並びのセル幅が左右均等になります。</p>
-
- <pre><code><font size="3">  #maincontent section.category .list div{
- display: table;
- <font>table-layout</font>: <b>fixed</b>;
- width: 100%;
- border-top: #b2b2b2 1px solid;
-  } </font></code></pre>
-
- <p> </p>
- </li>
-</ol>
-
-<h2 id="メリット">メリット</h2>
-
-<p> ・他のブラウザでも互換性を維持することができます。<br>
-  ・細かいpxの指定をせずにテーブルの見た目を整えることができます。<br>
-  ・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、<br>
-   発生したセルに対して<a href="https://developer.mozilla.org/ja/docs/Web/CSS/overflow">overflow</a>プロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。</p>
-
-<p><br>
- <a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>