標準モードで高さ100％の入れ子になったテーブル

いくつかのテーブル（入れ子になっている）で表示上の問題を修正しようとしています。要するに、製品を掲載しているページを表示します。各製品はそれ自身のテーブルに表示されます。そしてこれらのそれぞれはページをレイアウトするために大きなテーブルに入れ子になっています。残念ながら、内側のテーブルの中には、他のものよりも若干多くの内容があり、異なるサイズになってしまい、他の人がセルを埋めることができなくなってしまいます。例えば標準モードで高さ100％の入れ子になったテーブル

：Quirksモード、赤いテーブルで

<table style="height:500px; background:blue;"> 
    <tr> 
     <td style="vertical-align: top"> 
      <table style="background:red; height: 100%;"> 
       <tr> 
        <td>hello</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table>

は、青色のテーブルを埋め、あなたは基本的に青い枠線で、赤のテーブルを参照してください。

ただし、標準モードでは、内部テーブルは展開されずに青色の表が塗りつぶされます。レイアウトが予期したとおりにならないようにします。

この現象を修正するにはどうすればよいですか？私はそれが維持の悪夢を作成してしまうので、奇妙にレンダリングしたくありません。

出典

2011-07-11 CaffGeek

私は好奇心が強いです。なぜあなたはテーブルを入れ子にしていますか？レイアウト用に使用している場合は、そうしないでください。 – You

_tablesはレイアウト用ではありませんので、そのようなものとしては使用しないでください。 :) – Nightfirecat

@Nightfirecat、私はそれを実現します。残念ながら、私はこのコードを書いておらず、表示上の問題を修正しようとしました。 – CaffGeek

<td>と<tr>タグにstyle="height: 100%;"を入れます。高さを100％に設定すると、すべての親が定義された高さを持つ必要があります。

出典

2011-07-11 17:57:22

これは私のサンプルではうまくいくようですが、実際のページでは、このテーブルは非常に深く入れ子になっていて、親の高さの変更は実用的ではありません。別の方法がありますか？ – CaffGeek

申し訳ありませんが、私はそれが痛みであることを知っていますが、私は決して他の方法を見つけたことはありません。それはあなたが話すサイトの多くを見つけることができる既知の問題です。他の唯一のオプションは、内側のテーブルにpxの高さを設定することです。 –

px（またはemまたは％以外のもの）を使用するすべての親までの100％の表との間の高さを定義する必要があります。あなたはそれがすべての方法を超えていない限り、ルートにすべて行く必要はありません。 –

外部表の高さを設定する代わりに、ネストした表の<td>およびstyle="height: 100%;"の高さを設定します。

出典

2017-10-26 06:11:00 code4j

標準モードで高さ100％の入れ子になったテーブル

答えて

関連する問題