0

HTML テーブルがあります
。必要な詳細は JSFiddle に記載されています。
これは Firefox ではうまくいきますが、Chrome と IE ではうまくいきません! 彼らの何が問題なのですか？最初の列の高さが決定されていない唯一のセルである2番目の行ではなく、固定された高さを持つ最後の行のセルを展開する理由。
HTMLコードは次のとおりです。

<table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0">
<tr>
    <td style="height: 100px; width: 176px; background:blue">
        this is a fixed size cell
    </td>
    <td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td>
</tr>
<tr>
    <td style="background:red">this should expand depending on gray region</td>
</tr>

<tr>    
    <td style="height: 46px; background:blue">this is a fixed size cell</td>
</tr>

4

1 に答える 1

2

あなたのケースの高さアルゴリズムが不足しているようです。td {height: auto}使用可能なすべてのスペースを拡張したいが、

'table-row' の 'auto' の 'height' 値は、レイアウトに使用される行の高さが MIN であることを意味します。MIN は、セル ボックスの高さとセル ボックスの配置に依存します。CSS 2.1 では、セル ボックスの高さは、コンテンツに必要な最小の高さです。

そして最後に

CSS 2.1 では、複数の行にまたがるセルが行の高さの計算にどのように影響するかを指定していませんが、関連する行の高さの合計が、行にまたがるセルを囲むのに十分な大きさでなければなりません。

17.5.3 表の高さアルゴリズムを参照

于 2013-05-07T11:22:21.543 に答える