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

时间:2009-08-31 14:45:19

标签: css internet-explorer html-table width

我使用表格生成简单的水平图形(便于缩放)。 我使用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是唯一可以完全重叠的技术。

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

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

像这样的标题可以让你省去修复IE 8的麻烦,让它渲染为IE 7:

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

除此之外,您可以尝试查看IE 8正在执行的操作并使用特定的html条件进行修复:

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

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

HTML conditions
Beyond Doctypes

答案 1 :(得分:0)

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

有些东西也没用,如果你想要宽度为100%,请将其宽度设置为10 000px!

在IE,Google Chrome和&amp ;; Safari浏览器