Search code examples
cssinternet-explorertablerowstretching

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

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?

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%;
}