How can I make “display: block” work on a <td> in

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

标签： html css internet-explorer internet-explorer-8

5条回答

唯我独甜

2楼-- · 2019-01-17 14:48

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>

0人赞添加讨论(0) 举报

孤傲高冷的网名

3楼-- · 2019-01-17 14:49

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.

0人赞添加讨论(0) 举报

爷、活的狠高调

4楼-- · 2019-01-17 14:54

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.

0人赞添加讨论(0) 举报

孤傲高冷的网名

5楼-- · 2019-01-17 14:56

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

0人赞添加讨论(0) 举报

We Are One

6楼-- · 2019-01-17 15:01

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

0人赞添加讨论(0) 举报

How can I make “display: block” work on a in

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间