asked on

CSS table not working in IE7

Can someone tell me why the below does not work in IE7?
(cells all appear on their own row)

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">Row 1 Cell 1</div>
        <div style="display: table-cell">Row 1 Cell 2</div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell">Row 2 Cell 1</div>
        <div style="display: table-cell">Row 2 Cell 2</div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell">Row 3 Cell 1</div>
        <div style="display: table-cell">Row 3 Cell 2</div>
    </div>        
</div>

Open in new window

Morcalavin

I don't think IE support display: inline-cell properly. You can try to set them as inline, although that comes with it's own set up of problems, depending on what you are trying to accomplish.
Is there a reason you are just not using a table?

<div style="display: table">
    <div style="display: table-row">
        <div style="display: inline">Row 1 Cell 1</div>
        <div style="display: inline">Row 1 Cell 2</div>
    </div>
    <div style="display: table-row">
        <div style="display: inline">Row 2 Cell 1</div>
        <div style="display: inline">Row 2 Cell 2</div>
    </div>
    <div style="display: table-row">
        <div style="display: inline">Row 3 Cell 1</div>
        <div style="display: inline">Row 3 Cell 2</div>
    </div>        
</div>

Open in new window

SRigney

I would guess that the display style of block on the div has higher priority than setting style to display: table-cell. However, I've had times in the past that if I add a class to the div and set the display for that class to what I want it works.

At the least, by changing to use a style you have smaller code and an easier way to change the display of all of your cells at the same time by updating your one CSS rule.

.cell { display: table-cell }
 
<div style="display: table">
    <div style="display: table-row">
        <div class="cell">Row 1 Cell 1</div>
        <div class="cell">Row 1 Cell 2</div>
    </div>
    <div style="display: table-row">
        <div class="cell">Row 2 Cell 1</div>
        <div class="cell">Row 2 Cell 2</div>
    </div>
    <div style="display: table-row">
        <div class="cell">Row 3 Cell 1</div>
        <div class="cell">Row 3 Cell 2</div>
    </div>        
</div>

Open in new window

David S.

IE7 doesn't support display:table, display:table-row, or display:table-cell. IE8 does, however.

Perhaps if you gave use more information about what you're trying to do we could suggest a workaround.

Sailing_12

ASKER

See attached.
no-tables.gif

ASKER CERTIFIED SOLUTION

David S.

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Sailing_12

ASKER

Thanks.

RationalRabbit

A little adaptation using four columns:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">/* <![CDATA[ */
      dl.events {
        margin: 1em auto;
       padding: 0;
      }
      dl.events dt {
         font-weight:bold;
         margin: 0;
        float: left;
        clear: left;
        width: 50px;
      }
      dl.events dd.c2 {
         font-weight:bold;  
         width: 50px;
      }
      dl.events dd {
        float: left;
       width: 110px;
      }
/* ]]> */</style>
</head>
<body>

<dl class="events">
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dd class="c2">Milk</dd>
  <dd>White cold drink</dd>
</dl>
<dl class="events">
  <dt>Tea</dt>
  <dd>Good hot drink</dd>
  <dd class="c2">Water</dd>
  <dd>Clear cold drink</dd>
</dl>

</body>
</html>

Open in new window