38

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.)

6
  • 2
    Why on earth would you want to do that?
    – Kyle
    Feb 23, 2011 at 13:35
  • I'm restyling it to a barchart, where each row becomes a horisontal bar with width taken from the contents of one cell, with remaining td:s lined up to the left. Works perfectly in Firefox, Safari and Chrome.
    – Daniel
    Feb 23, 2011 at 13:40
  • 4
    I think you'd be better ignoring my answer. Instead, you should use Javascript/jQuery to dynamically create a bar chart from your table data. Like a combination of this and this. I don't think you're likely to find a way to reliably make the <table>s behave the way you want them to.
    – thirtydot
    Feb 23, 2011 at 14:29
  • Thanks again. That is probably true. I'm doing some part of the transformation through jQuery anyway. I went for the solution of manipulating the existing DOM objects rather than replacing them, since it seemed cleaner, and worked well - until I came back to the PC at work and IE ... Oh, well. I guess I should know by now to never ever polish the details in any browser before testing the basics in all.
    – Daniel
    Feb 23, 2011 at 14:50
  • 4
    Real world use case: Chris Coyier's clever responsive data table technique doesn't work in IE 9 without help. Feb 8, 2013 at 11:10

5 Answers 5

39

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:

enter image description here

11
  • In that case, I suggest switching to divs with the display:table (etc) properties set.
    – Marcin
    Feb 23, 2011 at 14:23
  • 2
    @Marcin: You need to read the question more carefully. The OP specifically wants to keep the table tags, and restyle them: "The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.".
    – thirtydot
    Feb 23, 2011 at 14:26
  • If you set the display properties, it will really act as a table. I don't see the issue.
    – Marcin
    Feb 23, 2011 at 14:28
  • @Marcin: You said: "I suggest switching to divs" - the OP said (paraphrased): "I have my <table>s and I want to make them behave like <div>s". He doesn't want to change the <table> HTML, that's the point I'm making here.
    – thirtydot
    Feb 23, 2011 at 14:31
  • 1
    @Marcin: I want to have and eat the cake like I can in other browsers. ;-) I'm aware that there are other options to my current markup, and it's not an enormous issue, but I was hoping to solve this by building on the standard, non-obtrusive css/javascript I already have in place. Since I haven't found any information whether IE can or can't do this, or if there's some quirk I could use, I was hoping for someone who knows more to chime in. Then I was a little disturbed when that was insinuated to be unreasonable. (I added that last paragraph to avoid this discussion ...)
    – Daniel
    Feb 23, 2011 at 20:10
4

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.
3

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>

6
  • “It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.” — Not all users can upgrade, and lots won’t care about, or understand, your browser upgrade message. May 15, 2018 at 10:09
  • Yes. I agree. That’s why I created a free API to facilitate this. See: webvakman.nl/api/recentbrowserversions May 15, 2018 at 21:25
  • @PaulD.Waite Sorry. I misunderstood your comment. Some people may not understand but that doesn’t mean you shouldn’t try. You have a responsibility as a web developer and IE8 (or any other version) is end of life and should not be used anymore. Even Microsoft doesn’t support it. May 15, 2018 at 21:28
  • Yup, I’m not saying IE 8 is a good choice. I’m saying it’s actually not your responsibility. Prompting users to upgrade their browser when they visit your site is a bit like your local greengrocer telling you to get a new car when you pop in for some bananas. Even if they’re right, it’s not what you went there for, you have no particular reason to trust their opinion on car maintenance, and maybe you literally have no way to get a new car right now. May 16, 2018 at 7:23
  • Well, I do think webdevelopers are closer to browsers than a greengrocer is to a car. It's more like the greengrocer telling you to not put the vegetables in an ancient Egyptian storagecontainer because he just knows it is not airtight and it will not stay fresh in there. You know, because of all the other customers with rotten vegatables from their ancient greek containers :D It's more like a surgeon on the subway seing someone whith a very bad mole. He better speak up and point to the right oncologist. It is not what the person was expecting at that time, but it might save his life... May 16, 2018 at 8:47
0

add this code:

<!DOCTYPE html>

我这里是这么解决的,加上上面那条声明语句,display:block对td就会有效。

you need add this code in the top.

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Add this line of code in the top, but use 'float' and 'width' is very good. sorry, my english so poor.

1
  • Unfortunataly, your example is displayed as a table in IE8.The doctype string you suggested shouldn't have any different effect than <!DOCTYPE html> or any other doctype that switches Standards mode on (see hsivonen.fi/doctype for details). Jul 16, 2015 at 7:17
0

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.