<TR> takes viewport size in IE6,7.

[Dat0]

I have a table inside a div with height=100%(viewport). The also table has height=100%(viewport). However, I want one row to have a fixed height while other adjusts to the content.

<div style="height:100%;">
<table style="height:100%">
<tr style="height:10px;"><td>Header</td></tr>
<tr style="height:100%;"><td>Header</td></tr>
</table>
</div>

The problem is that the second tr also takes viewport (100%) size. Thus I have a table that has a height of is 10px + viewport size. This is not what I want. Internet explorer seems to screw this up for some unknown reason. How do I make so that this work in internet explorer.

[carmen007]

I have a table inside a div with height=100%(viewport). The also table has height=100%(viewport). However, I want one row to have a fixed height while other adjusts to the content.

<div style="height:100%;">
<table style="height:100%">
<tr style="height:10px;"><td>Header</td></tr>
<tr style="height:100%;"><td>Header</td></tr>
</table>
</div>

The problem is that the second tr also takes viewport (100%) size. Thus I have a table that has a height of is 10px + viewport size. This is not what I want. Internet explorer seems to screw this up for some unknown reason. How do I make so that this work in internet explorer.

you are using div and table 100% may be you should use min-height if it is allowed...........

[Troy III]

I have a table inside a div with height=100%(viewport). The also table has height=100%(viewport). However, I want one row to have a fixed height while other adjusts to the content.

<div style="height:100%;">
<table style="height:100%">
<tr style="height:10px;"><td>Header</td></tr>
<tr style="height:100%;"><td>Header</td></tr>
</table>
</div>

The problem is that the second tr also takes viewport (100%) size. Thus I have a table that has a height of is 10px + viewport size. This is not what I want. Internet explorer seems to screw this up for some unknown reason. How do I make so that this work in internet explorer.

No -Explorer is acting as expected and as it normally should.
It doesn't have the "bleeding content" bug you are rellying on to get your layout idea into practice here.
The content should never bleed out of the table cell which is a container and containers should always be able to contain things. Thats their sole pupose.

You are using tables - than use table conventional methods to manage you content, don't use hacks. It's a bad coding practice.
Read about rowspan and collspan starting here, or get yourself a WYSIWYG - table editor for a fast solution.

p.s.: and you shouldn't use no pupose divs to wrap tables - tables are themselves block elements, you've also stated div 100% table 100% but 100% of what?!

[MidiMagic]

Different browsers use different standards when height: 100%; appears in a box object that is not contained in another box object. Some browsers use the height of the viewport, others use the size of the document.

My advice is to never use a percentage height unless the object is contained in something else that has a definite height. It is unpredictable.