在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中测试此演示.(在firefox和chrome中工作正常)

这是小提琴中的代码.

以下是我无法改变的严格要点

• 宽度为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来tr的THEAD和TBODY的.

IE8演示

       2)    向after伪选择器的内容添加隐藏字母.

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

我在条件css中添加了上面的内容.因为问题只出现在IE8中.(我还没有在IE9 +中测试过)

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

IE8演示

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