How can I make "display: block" work on a <td> in IE?

Is there anything I can do to make IE display table cells as actual blocks?

Given this style:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

And this html:

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.

My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)

I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.

So once again, is there anything I can do to make IE render table cells as block?

(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)

Answers


I applied float: left to stuff. It kinda works.

Live Demo

The biggest problem is width: 100% combined with the padding is making things too wide.

So: Live Demo (without the problematic padding)

That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.


This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).

IE7:


The following worked for me for IE6+:


tr {
  display: block;
  position: relative
}

td.col1 {
  display: block;
  left: 0;
  top: 0;
  height: 90px;
}

td.col2 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
}

td.col3 {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

Assumptions:

  • cell height 30px

Drawbacks:

  • Fixed cell height
  • Cumbersome specification of top property (maybe generate)
  • Only works when HTML provides classes for columns

Advantage:

  • Works in all browsers.

When to use:

  • When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.

Just figured it out with a collegue of mine.

ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE! Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.

That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

add this code:

<!DOCTYPE html>

make it display:table-row; instead of display:block It will work like it is supposed to


Need Your Help

What is the difference between microsoft visual studio scrum 2.0 vs MSF for Agile Software Development 6.0

tfs scrum tfs-process-template msf

What is the difference between Microsoft Visual Studio Scrum 2.0 vs MSF for Agile Software Development 6.0.

ReactJS Two components communicating

reactjs

I just got started with ReactJS and am a little stuck on a problem that I have.