Internet Explorer 中的表 colspan 相对宽度问题答案

【问题标题】：Table colspan relative width issue in Internet ExplorerInternet Explorer 中的表 colspan 相对宽度问题
【发布时间】：2010-11-24 09:01:20
【问题描述】：

我使用表格来生成简单的水平图（以便于缩放）。我使用 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&nbsp;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&nbsp;7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B&nbsp;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&nbsp;72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B&nbsp;1</td>
</tr>
</table>


</body>
</html>

我尝试过其他技术，例如 div 和为每行单独的表格，但 colspanning 是获得重叠精确的唯一技术。

另一种解决方案是在服务器上渲染图像，但随后我会松动缩放，这非常耗时。

非常感谢任何帮助。

【问题讨论】：

标签： css internet-explorer html-table width

【解决方案1】：

我和你有同样的问题......我的解决方案是使用一些时髦的 javascript（当然是 Jquery ;-)）代码来修复 TD 宽度......

还有一些没用的东西，如果你想把宽度设置为 100%，请将其宽度设置为 10 000 像素！

在 IE、Google Chrome 和 Safari 上出现同样的问题

【讨论】：

【解决方案2】：

这样的标题将通过将其呈现为 IE 7 来省去为 IE 8 修复它的麻烦：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

除此之外，您可以尝试查看 IE 8 正在做什么并使用特定的 html 条件进行修复：

<!--[if IE 8]><![endif]-->

我希望我能提供更多帮助，但我没有 IE 8，所以我看不到问题。
也许这些链接可以提供帮助：

HTML conditions
Beyond Doctypes

【讨论】：