4

レイアウト用のテーブルの古き良き時代に戻ると、次のことができます。

<div style="height: 400px;">
<table style="height: 100%">
    <tr>
        <td>This cell sizes to its content</td>
    </tr>
    <tr>
        <td height="100%">This cell takes up the remaining height.
    </tr>
    <tr>
        <td>This cell sizes to its content</td>
    </tr>
</table>
</div>

今、私は と を使用して同じことを達成しようとしていdisplay: tableますdisplay: table-cell。これが私の試みです：

http://jsfiddle.net/p3jwr/6/

FF と Chrome で正常にレンダリングされます。テーブルが構築される 400px のうち、1 番目と 3 番目の行はそれぞれ 100 ピクセルを占め、2 番目の行は残りのスペースを埋めて 200 ピクセルになります。

IE9 (これは私がサポートする必要がある最低の IE です) では、2 行目が 400px に拡張されます。これは、テーブルの親のサイズの 100% です。これにより、テーブル自体が親の 100% 以上に拡大されます。

ここでの目標は、サイズは不明ですが、確実に設定される親を埋めるためにテーブルを拡大し、1 行目または 3 行目で使用されていないスペースを占めるように中央の行を拡大することです。

誰でも IE の回避策を提案できますか? 他のブラウザーで動作する必要さえありませんが、display: table に固執することを望んでいました。

4

2 に答える 2

0

お役に立てれば：

div > table {
        height : auto !important;  
        height : 100%;            
        min-height : 100%;        
    }

ほとんどのブラウザに適用されます。それをチェックしてください！

于 2013-09-25T16:01:39.373 に答える
-3

このコードを試して、

<div style="height: 400px;">
   <table style="height: 100%">
         <tr style="height: 25%">
               <td>This cell sizes to its content</td>
         </tr>
         <tr style="height: 50%">
               <td>This cell takes up the remaining height.
         </tr>
         <tr style="height: 25%">
               <td>This cell sizes to its content</td>
         </tr>
   </table>
 </div>

次の仮定では、400px の 25% = 100px 400px の 50% = 200px

于 2014-07-24T09:56:22.640 に答える