From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../broken_table_layout.html/index.html            | 67 ++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 files/ja/web/compatibility_faq/broken_table_layout.html/index.html

(limited to 'files/ja/web/compatibility_faq/broken_table_layout.html/index.html')

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
new file mode 100644
index 0000000000..32dc4a39a4
--- /dev/null
+++ b/files/ja/web/compatibility_faq/broken_table_layout.html/index.html
@@ -0,0 +1,67 @@
+---
+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>
-- 
cgit v1.2.3-54-g00ecf