IE8从tbody中排除了列

Question

我在页面上显示多个表时遇到问题。

表格代码非常简单。 CSS将每个td的宽度设置为％，table-layout为fixed。

似乎问题是由于第一个表有X个列，但是第二个表有X + 3.这导致最后一列从表体中排除。

在检查DOM时，我可以看到右边的最后一列存在于表体之外（在设计中），但存在于代码中的表体内。

如果我从css中删除table-layout:fixed，表格会重叠，但它会将正确的CSS背景颜色等应用到最终列。如果我按原样保留表格布局，也会删除宽度：100％属性。所以看起来它也可能是一个问题，从第一个表开始，所有表中的固定表宽度都得到维护。

我认为这可能与此SO answer.

密切相关

有什么想法吗？

<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
            </td>
        </tbody>
    </table>
</div>
<div>
    <table>
        // th elements
        <tbody>
            <tr>
               <td>1</td>
               <td>2</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

解决这个问题的方式与我的预期相似。

事实证明，IE（以及其他一些浏览器）将基于第一个表的第一行来建立所有表格布局。

因此，如果您在一个页面上有多个具有不同数量列的表格，那么最终可能会出现任何额外的列悬挂在表格末尾的情况，就像我的那样。

有些人建议在colgroup之上使用col和thead属性，但我发现这对我没用。

相反，我创建了一个隐藏的thead高于我的原始版本，其中包含所需的最大列数。

    <thead>
        <tr hidden="hidden">
            <th span="1"></th>
            <th span="3"></th>
            <th span="3"></th>
            <th span="3"></th>
            <th span="1"></th>
            <th span="2"></th>
        </tr>
    </thead>
    <thead>
        // My actual table headers
    </thead>