CSS display table in IE

Question

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>

IE7 and below don't support `display: table`, so the only workaround is actually using a table. http://caniuse.com/css-table — Andy, Nov 14 '12 at 18:08
Here's a JSFiddle for everyone (took two seconds to make): http://jsfiddle.net/U9eVA/ — Chuck Le Butt, Nov 14 '12 at 18:11
@Andy: Since you've changed your comment. Originally it only said IE... Hence my IE8 comment... ;) — Robert Koritnik, Nov 14 '12 at 18:13
If you're making a TABLE, it's best just to use a . Just don't use
for layouts. — Chuck Le Butt, Nov 14 '12 at 18:13
@DjangoReinhardt Yes, this is my layout of a page. I just want to have 3DIVs all the same height (height depend of text in DIVs). First DIV has fixed width (there is menu), third also has fixed width (there is pol and cart), the second DIV takes all available width (total of all three is 100%). In second DIV I want to have three other DIVs, one on top, one on bottom, and one that takes all available space. — user1784025, Nov 14 '12 at 20:28

Chuck Le Butt · Accepted Answer · 2012-11-15T03:58:56.720

7

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 floats 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!

edited Nov 15 '12 at 03:58

answered Nov 14 '12 at 18:15

Chuck Le Butt

47,570
62
203
289

2

Oh it's not so simple as you may think ... http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height .. esp. when you don't want to have to modify the css (padding)everytime you need to add another line-breaking element in your div.. – Don Cheadle Nov 05 '15 at 14:23
1

@mmcrae That's a very common problem. Flexbox can help there these days, too. http://caniuse.com/#feat=flexbox – Chuck Le Butt Nov 05 '15 at 15:19
1

@ChuckLeButt Flexbox is great only if you don't have to support IE 8 or 9 – Alexandra Apr 02 '19 at 21:38

CSS display table in IE

1 Answers1