Can I create a HTML table width a percentage height but pixel accurate row heights?

Question

I need to create a table on a web page that has two rows. The table needs to fill the entire page so I have set the height and width of the table to 100% in the CSS styleshe

Answer 1

Well, there's me thinking I know how to do this, so I run out the code:

    


    

        

            

                
100
            
            

                
*
            
        
    

 

(note, strict + CSS)

And I find that although this works in Firefox, Chrome and anything !IE I like, IE has some very unusual behaviour here. Long story short IE is disregarding the pixel dimensions and instead compares relative heights! It misreports this in the IE dev toolbar, but you can clearly see it if you add and change a height on tr#expand

If you set a height of 100px, you'll find both tr's actually render at 50%. At 200px, you'll get a 33/66 split, at 50px you'll get a 66/33 split! This seems to be true for other units like em, and I suspect it might be related to content since it has edge behaviour at low units like 5px. As far as I can see IE is outright broken here. This is not a bug I have seen before, nor one I've been able to google. Until a workaround suggests itself, it seems to me that you're SOL for a strict solution.