Geek Answers Handbook

How to make display table cell stretch to rest of table height in IE

In the good old days, tables for the layout could be done:

<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>

Now I'm trying to achieve the same thing using display: table and display: table-cell . Here is my attempt:

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

It works great in FF and Chrome. From 400px, the table should be built inside, the first and third rows occupy 100px, and the second row fills the remaining space, working up to 200px.

In IE9 (and the lowest IE I need to support), the second row expands to 400 pixels, which is 100% of the size of the table parent . This stretches the table directly to over 100% of its parent.

The goal is to stretch the table to populate its parent, whose size is unknown, but will definitely be set, and so that the middle stretch of the row occupies the space not used by the first or third row.

Can anyone suggest a workaround for IE? It should not even work in other browsers, but I was hoping to stick to the display: table.

+4
source share
2 answers

Hope this helps:

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

This applies to most browsers. Check it!

0
source

Try this code,

 <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>

with the following assumptions, 25% of 400px = 100px 50% of 400px = 200px

-3
source

More articles:


All Articles