How can I make “display: block” work on a <td> in IE?
Question
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.)
5 answers
solution1
38 2011-02-23 13:56:21
I applied float: left to stuff . It kinda works.
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:
solution2
4 2011-04-14 17:36:17
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
topproperty (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.
solution3
3 2014-11-24 14:59:32
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>
solution4
0 2015-07-16 06:56:51
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.
solution5
0 2018-07-31 06:48:00
make it display:table-row; instead of display:block It will work like it is supposed to
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.