IE8 从 tbody 中排除列

Question

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

table代码非常简单。 CSS 设置每个 td 的宽度，table-layout 是 fixed.

问题似乎是因为第一个 table 有 X 列，而第二个有 X + 3。这导致最后一列被排除在 table 正文之外.

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

如果我从 css 中删除 table-layout:fixed，table 会重叠，但它会应用正确的 CSS background-colors 等最后的专栏。如果我按原样保留 table-layout 但删除 width:100% 属性，也会发生这种情况。因此，从第一个 tables 开始，固定 table 宽度似乎也可能是一个问题。

我相信这可能与此密切相关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（和其他一些浏览器）将基于第一个 table 的第一行的所有 table 布局。

因此，如果您在一个页面上有多个 table 且列数不同，您最终可能会遇到任何额外的列都悬在 table 末尾的情况，和我一样。

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

相反，我在原始文件之上创建了一个隐藏的 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>

IE8 从 tbody 中排除列

IE8 excludes columns from tbody

html

css

html-table

internet-explorer-8

tablelayout