在opera和IE7中看起来不同的类似表格

Question

我正在尝试实现基本的固定表头效果。为此，我使用两个具有完全相同标记和CSS的表。 “content”表位于具有overflow-y set的div中。除了IE7和Opera之外，一切看起来都很好，其中“标题”表的列宽不同于“内容”表。

这是一个jsfiddle：http://jsfiddle.net/gEtGW/1/

如果您对此有所了解，请告诉我。

谢谢！

编辑：

Answer 1

在你的HTML中，你有这个......

<table class="inner-table">
    <colgroup>
        <col width="83">
        <col width="92">
        <col width="123">
        <col width="120">
        <col width="177">
        <col width="84">
    </colgroup>

最重要的宽度总计为679。

然而，在你的CSS中，你有这个......

.inner-table {
    width: 680px;
}

我不确定每个浏览器应该对额外/缺失像素做什么，或者他们如何决定一个像素差异是一个额外像素还是缺少一个像素。 679对680 ...哪一个优先？

尽管如此，我确信每个浏览器都可能以不同的方式呈现这一点。

Answer 2

发现问题（问题是文本风格）：

'列'文字正在使列celd的界限发生变化

例如，更改“col”的“列”，您会看到它：

http://jsfiddle.net/qYnPU/

Answer 3

我有同样的问题，我首先尝试以与你一样的方式解决它。但这没有任何结果 - 只是因为您所看到的各种跨浏览器问题。我花了几天时间试图做对。我终于放弃了两桌的方法。相反，我使用表头材料创建了一个div，从内容表的第一行计算每个头元素的宽度。它在所有浏览器中都运行良好。我提出了一个类似你的问题over here on SO。你可能想看一看。

这是the table using the new scheme.

HTH