IE8中的表格tbody滚动

Question

在我的项目中，我试图让tbody 在IE8 中滚动。我知道它可以通过将overflow: auto 传递给tbody 来滚动。但这在 IE8 中不起作用。要使其在 IE8 中工作，必须将 tbody 指定为 position: absolute（或将 float: left 指定给 thead 和 tbody）。如果我让overflow: auto 工作，那么我分配给th 和td 的宽度百分比将被忽略。这反过来又不让tr 占据thead 和tbody 的整个宽度。因此，tr 和 tbody/thead 之间有一个令人讨厌的空间。

请在 IE8 中测试这个demo。 （在 Firefox 和 chrome 中运行良好）

这是fiddle中的代码。

这是我无法更改的严格点

• td 和 th 的宽度必须是百分比。
• 我无法更改 HTML 标记
• 必须使用 CSS 来解决。

实际上，我确实通过如下的脏修复解决了它

th:after,td:after{ /* only to the last column, first occurence */
    content: "...................................................";
    visibility: hidden;
}

上面的代码也可以通过在开发者工具中给一个特定的 td/th 加上很多点来检查

上面的代码看起来没问题，但我需要将:after 伪选择器只提供给第一行最后一列th 和tr。如果我给每个th 和tr，那么布局就会混乱。如果tr 和tbody 之间的空白空间更多，则必须增加dots。然后当然这只能动态实现，而我在当前项目中无法做到这一点。

PS：我可能做错了。我只是在分享我的努力，我非常接近结果。

Answer 1

我在 IE8 中找到了两种解决这个问题的方法。

       1)   将width: 0px 的额外td 元素添加到thead 和tbody 的tr。

IE8 demo

       2)  在after伪选择器的内容中添加隐藏字母。

    tr:after{
        content: ".";
        visibility: hidden;
    }

我在条件 css 中添加了上述内容。因为问题只在 IE8 中。 （我没有在 IE9+ 中测试过）

    <!--[if IE 8]>
         <style>
             /* the above css code here */
         </style>
    <![endif]--> 

IE8 demo

我使用了后者，因为它很简单。