Question

在我的项目中，我试图在IE8中制作tbody滚动条。我知道只需将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，那么布局就会搞乱。如果dots和tr之间的空格更大，则必须增加tbody。那么当然这只能动态地实现，这是我目前的项目中无法做到的。

PS：我可能完全错了。我只是在与结果非常接近的情况下分享我的努力。

Answer 1

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

1）将td的额外width: 0px元素添加到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

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

在IE8中表tbody滚动

1 个答案: