Html 如何使“显示：块”在 IE 中的 <td> 上工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5091503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make "display: block" work on a <td> in IE?
提问by Daniel
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. But in Internet Explorer (8) the property display: blockhas no effect. The table renders exactly as if I don't set that property.
该表的呈现方式与 Firefox 和 Safari/Chrome 中的嵌套 div 完全相同。但在 Internet Explorer (8) 中，该属性display: block无效。表格呈现的效果就像我没有设置该属性一样。
My main problem is that the cells don't break; They all render on one line. (The tbodyand trelements don't get any borders nor padding. That is not a problem for me right now, though.)
我的主要问题是细胞不会破裂；它们都在一行上渲染。（tbodyandtr元素没有任何边框或填充。不过，这对我来说现在不是问题。）
I haven't found any information on the problem when searching. Compatibility charts on quirksmodeand elsewhere states that IE supports display: blocksince 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.
我在搜索时没有找到有关该问题的任何信息。quirksmode和其他地方的兼容性图表表明 IEdisplay: block从 5.5 版开始支持。任何关于表格显示问题的讨论似乎都是在做相反的事情时 - 为非表格元素提供任何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.)
（真正的表格实际上是一个表格，带有表格数据。我想保持这种状态，并且不显眼地重新设置样式。）
回答by thirtydot
I applied float: leftto stuff. It kinda works.
我申请float: left了东西。它有点工作。
The biggest problem is width: 100%combined with the paddingis making things too wide.
最大的问题是width: 100%与合并padding太宽做的事情。
So:
Live Demo(without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add paddingeverywhere 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：
回答by cmc
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) - Only works when HTML provides classes for columns
- 固定单元高度
- 繁琐的
top属性规范（可能会生成） - 仅当 HTML 为列提供类时才有效
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.
- 当您无法控制 HTML，但可以控制 CSS 时。我想到了一些托管支付解决方案，它们显示在 IFRAME 中并提供自定义样式表。
回答by Marc van Nieuwenhuijzen
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.
虽然我强烈建议不要再支持 IE8！因为您正在促进使用不符合当前标准和技术的不受支持且当前不安全的产品。最好告诉您的用户升级并为他们提供一些浏览器下载链接以供选择。
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>回答by Lucio Lu
add this code:
添加此代码：
<!DOCTYPE html>我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
我这里是这么解决的，加上上面那条声明语句，显示：block对t会有效。
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.
在顶部添加这行代码，但使用'float'和'width'非常好。对不起，我的英语太差了。
回答by Sumit Chauhan
make it display:table-row;instead of display:blockIt will work like it is supposed to
让它display:table-row;而不是display:block它会像它应该的那样工作
