CSS display table in IE
css, css-tables, html, internet-explorer
Solution
IE7 doesn't support `display:table`, your code looks fine in IE8, IE9 and IE10. So either you must use an actual `<table>` or, if it's an option, use `float`s instead.
No other way, I'm afraid.
Edit: Apparently this is for your page layout. You shouldn't be using `<table>` or `display:table`. Just float some DIVs man!
Problem
I have the following code and CSS. It works good in Chrome, but not in IE. Is there any way to make it work in IE too? CSS: ``` <style type="text/css"> .table {width:100%;height: 1%;background-color: lime;display: table;border-collapse: collapse;} .row {display: table-row;} .centercell {vertical-align: top;display: table-cell;background-color: #0f0;} .top{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;} .bottom{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;} .middle{background-color:pink;width:100%;height: 100%;margin: -20px 0px;position: relative;padding: 20px 0px;} .rightcell {vertical-align: top;background-color: #f00;display: table-cell;width:155px;background-image: url('img/bg1.gif');background-repeat:repeat-y} .leftcell {vertical-align: top;background-color: #f00;display: table-cell;width:171px;} </style> ``` HTML: ``` <div class="table"> <div class="row"> <div class="leftcell"> right column </div> <div class="centercell"> <div class="top">center top</div> <div class="middle">center middle</div> <div class="bottom">center bottom</div> </div> <div class="rightcell"> right column<br> right column<br> right column<br> right column<br> right column<br> right column<br> right column<br> right column<br> </div> </div> ```