Internet Explorer 中的表 colspan 相对宽度问题
我使用表格来生成简单的水平图（以便于缩放）。 我使用 colspanning 来获得精确的重叠（有时单元格彼此重叠，但在本例中不是）。
我的问题是 IE(8) 渲染相对单元格宽度错误。
我知道单元格不能小于其内容，但这不是这里的问题。
例如，示例中的“X 65”单元格比 IE 中的 47% 宽得多。 然而 Firefox 的表现却非常出色。
这是示例：
<html>
<body>
<style>
table.CompAnalysisTable {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white;
font-size:8px;
}
table.CompAnalysisTable td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table.CompAnalysisTable td table
{
border-style:none;
}
</style>
<table>
<tr>
<td>
</td>
<td class="nobr" valign="middle" align="left">Graph</td>
<td valign="middle" width="100%" align="right">Total 73</td>
</tr>
</tbody>
</table>
<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X 65</td>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A 7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B 1</td>
</tr>
<tr>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A 72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B 1</td>
</tr>
</table>
</body>
</html>
我尝试了其他技术，例如 div 和每行的单独表格，但 colspanning 是获得精确重叠的唯一技术。
另一个解决方案是在服务器上渲染图像，但随后我失去了缩放比例，这非常耗时。
非常感谢任何帮助。
I use tables for generating simple horizontal graphs (for easy scaling).
I use colspanning to get exact overlapping (sometimes the cells overlap each other, but not in this example).
My issue is that IE(8) renders the relative cell widths wrong.
I know that a cell can not get smaller than it's content, but that is not the issue here.
For example the "X 65" cell in the example gets alot wider then 47% in IE.
Firefox is doing great however.
Here is the example:
<html>
<body>
<style>
table.CompAnalysisTable {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white;
font-size:8px;
}
table.CompAnalysisTable td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table.CompAnalysisTable td table
{
border-style:none;
}
</style>
<table>
<tr>
<td>
</td>
<td class="nobr" valign="middle" align="left">Graph</td>
<td valign="middle" width="100%" align="right">Total 73</td>
</tr>
</tbody>
</table>
<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X 65</td>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A 7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B 1</td>
</tr>
<tr>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A 72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B 1</td>
</tr>
</table>
</body>
</html>
I have tried other techniques like divs and separate tables for each row, but colspanning has been the only technique for getting the overlapping exact.
Another solution is to render images on the server, but then i loose the scaling and it is pretty time consuming.
Any help is much appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
像这样的标题将省去您通过将其呈现为 IE 7 来修复 IE 8 的麻烦：
除此之外，您可以尝试查看 IE 8 正在做什么，并使用特定的 html 条件修复它：
I希望我能提供更多帮助，但我没有 IE 8，所以我看不到问题。
也许这些链接可以提供帮助：
HTML 条件
超越 Doctypes
A header like this will save you the trouble of fixing it for IE 8 by having it render it as IE 7:
Other than that you can try to see what it is that IE 8 is doing and fix that with a specific html condition:
I wish I could help more, but I do not have IE 8 so I cannot see the problem.
Maybe these links can help:
HTML conditions
Beyond Doctypes
我和你有同样的问题...我的解决方案是使用一些时髦的javascript（当然是Jquery;-)）代码来修复TD宽度...
如果你想要宽度为100%，也有一些无用的东西，将其宽度设置为 10 000px！
IE、Google Chrome 和 IE 上也有同样的问题狩猎之旅
I had the same problem than you ... My solution is to use some funky javascript (with Jquery of course ;-) ) code to fix the TD widths ...
Something useless as well, if you want a width to 100%, set its width to 10 000px !
Same problem on IE, Google Chrome & Safari