From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../broken_table_layout.html/index.html | 67 ---------------------- 1 file changed, 67 deletions(-) delete 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 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 ---- -

概要

- -

　テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。

- -
　　
- -

左：Firefox　右：他ブラウザ

- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    テーブルのセル幅の未指定

    - -

    　テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。

    - - 
    　　#maincontent section.category .list div{
-	display: table;
-	width: 100%;
-	border-top: #b2b2b2 1px solid;
-　　}
    - -

    　上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。
    -  

    -
    2. -
- -

解決策

- -

　解決策の代表例として以下があります。

- -
    -
  1. -

    テーブルのセル幅の未指定

    - -

    テーブルの配置指定に table-layout: fixed; を適用させます。
    - table-layout: fixed; の指定により、横並びのセル幅が左右均等になります。

    - - 
    　　#maincontent section.category .list div{
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-	border-top: #b2b2b2 1px solid;
-　　}
    - -

     

    -
    2. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・細かいpxの指定をせずにテーブルの見た目を整えることができます。
- 　・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、
- 　　発生したセルに対してoverflowプロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。

- -


- 戻る

-- cgit v1.2.3-54-g00ecf