开发者

100% height, nested table, in standards mode

I am trying to fix a display issue we are having with some tables (nested). In short, we show a page listing products. Each product is displayed in it's own table. And each of these is nested in a larger table to layout the page. Unfortunately, some of the inner tables have slightly more content than others and they end up being different sizes, causing others not to fill the containing cell.

For example:

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

I开发者_StackOverflow中文版n quirks mode, the red table, fills the blue table, so you basically see a red table, with a blue border.

In standards mode however, the inner table does not expand to fill the blue table. Causing the layout to be not at all as anticipated.

How can I fix this behavior? I don't want to render in quirks, as that will end up creating a maintenance nightmare.


Put style="height: 100%;" on the <td> and <tr> tags. Setting height to 100% needs every parent to have a defined height.


Instead of setting the height of the outer table, set the height of the <td> and style="height: 100%;" on the nested table.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜