如何在IE中的<td>上进行“display：block”工作？
[英]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? 
有什么办法可以让IE显示表格单元格作为实际块吗？
Given this style: 鉴于这种风格：
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html: 这个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. 该表呈现与Firefox和Safari / Chrome中的嵌套div完全相同。 But in Internet Explorer (8) the property display: block has no effect. 但在Internet Explorer（8）中，属性display: block无效。 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.) （ tbody和tr元素没有任何边框也没有填充。不过，这对我来说不是问题。）
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. quirksmode和其他地方的兼容性图表表明IE支持display: block from 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. 关于表显示问题的任何讨论似乎都是在反向时 - 为非表元素提供任何display: table-*属性。
So once again, is there anything I can do to make IE render table cells as block? 再一次，有什么办法可以让IE渲染表格单元格成块吗？
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.) （真正的表格实际上是一个表格，带有表格数据。我希望保持这种方式，并且不显眼地重复它。）
5 个解决方案
解决方案1
38 2011-02-23 13:56:21
I applied float: left to stuff . 我申请了float: left的东西 。 It kinda works. 它有点工作。
The biggest problem is width: 100% combined with the padding is making things too wide. 最大的问题是width: 100%与padding相结合使得东西太宽。
So: 所以：
Live Demo (without the problematic padding ) 现场演示 （没有有问题的padding ）
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it. 这看起来好一点，但我不确定如果你需要它可以在任何地方轻松添加padding 。
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中失败 - > 悲惨 < - 它只是不会克服它是<table>的事实），即使你不关心IE7，它也需要调整你的用例（如果它可以使用了。
IE7: IE7：
解决方案2
4 2011-04-14 17:36:17
The following worked for me for IE6+: 以下为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 细胞高度30px
Drawbacks: 缺点：
- Fixed cell height 固定的细胞高度
- Cumbersome specification of
topproperty (maybe generate)top属性的繁琐规范（可能生成） - Only works when HTML provides classes for columns 仅在HTML为列提供类时才有效
Advantage: 优点：
- Works in all browsers. 适用于所有浏览器。
When to use: 何时使用：
- When you have no control over HTML, but have control over CSS. 当您无法控制HTML，但可以控制CSS时。 Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet. 一些托管支付解决方案可以在IFRAME中显示并提供自定义样式表。
解决方案3
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! 尽管我强烈建议不要在任何时候支持IE8！ 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. 下面的CSS是您在Internet Explorer 8中修复它所需的最小css。
table { width: 100%; } td { float: left; width: 100%; }
<table> <tbody> <tr> <td>cell-1</td> <td>cell-2</td> </tr> </tbody> </table>
解决方案4
0 2015-07-16 06:56:51
add this code: 添加此代码：
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。 我这里是这么解决的，加上上面那条声明语句，显示：块对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. 在顶部添加这行代码，但使用'float'和'width'非常好。 sorry, my english so poor. 对不起，我的英语太差了。
解决方案5
0 2018-07-31 06:48:00
make it display:table-row; 让它display:table-row; instead of display:block It will work like it is supposed to 而不是display:block它会像它应该的那样工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.