css 100% stretched table inside a table-row fail in IE

StackOverflow https://stackoverflow.com/questions/17594368

Question

The problem: Stretching a table 100% width/height inside a table-row doesn't work in IE. Why?!

Here's the code (http://jsfiddle.net/GBsay/2/):

html:

<body>
    <div id="row">
        <div id="table">
           this table should be 100% width/height, green color<br/>
           It works in ANY browser except IE.<br/>
           WHY?!
        </div>
    </div>
</body>

css:

html, body {
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
body {
    display:table;
}
#row {
    display:table-row;
    width:100%;
    height:100%;
    background:#f00;
}
#table {
    display:table;
    width:100%;
    height:100%;
    background:#0f0;
}

This code works in all browsers except IE (7,8,9,10). Anyone knows how to fix this using only css?

Was it helpful?

Solution

The wonderful beauty of Internet Explorer, is a test of patience for many developers, however the solution is as follows

 
html, body {
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#table {
    position: relative;
    display:table;
    width:100%;
    height:100%;
    background:lightgreen;
}

body {

}
#row {
    width:100%;
    height:100%;
    position: static;
    display:block;
    background:lightblue;
    text-align:center;
    float: center;
    top:100%;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top