title: CSS display table in IE
body: <p>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? </p>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
          .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;}
      &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="table"&gt;
  &lt;div class="row"&gt;
      &lt;div class="leftcell"&gt;
          right column
      &lt;/div&gt;
      &lt;div class="centercell"&gt;
          &lt;div class="top"&gt;center top&lt;/div&gt;
          &lt;div class="middle"&gt;center middle&lt;/div&gt;
          &lt;div class="bottom"&gt;center bottom&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rightcell"&gt;
          right column&lt;br&gt; 
          right column&lt;br&gt; 
          right column&lt;br&gt; 
          right column&lt;br&gt; 
          right column&lt;br&gt; 
          right column&lt;br&gt; 
          right column&lt;br&gt; 
          right column&lt;br&gt; 
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p></p>