html – 表格在IE8中滚动

前端之家收集整理的这篇文章主要介绍了html – 表格在IE8中滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的项目中,我试图使IE8中的tbody滚动.我知道只要给予溢出即可滚动:auto to tbody.但这在IE8中不起作用.为了使其在IE8中工作,该tbody必须被赋予位置:absolute(或float:left to thead和tbody).如果我使溢出:自动工作,那么我分配给th和td的百分比宽度被忽略.这反过来又不让tr在thead和tbody中占据全宽.因此,tr和tbody / thead之间有一个刺激的空间.

请在IE8中测试这个demo. (在Firefox和chrome中工作正常)

这里是fiddle中的代码.

这里是我不能改变的严格要点

> width to td和th必须以百分比表示.
>我无法更改HTML标记
>它必须使用CSS来解决.

其实我用一个肮脏的修复解决了它,如下所示

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

上述代码也可以通过给开发者工具中的特定td / th提供许多点来检查

上面的代码看起来不错,但是我需要给出:在伪选择器之后,只有第一行最后一列th和tr.如果我给每一个和那个tr,那么布局是乱七八糟的.并且如果tr和tbody之间的空白空间更多,则点必须增加.那么当然这个只能在我目前的项目中动态地实现.

PS:我可能做错了.我只是分享了我的努力,我达到了非常接近的结果.

解决方法

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

1)将宽度为0px的额外的td元素添加到thead和tbody的tr中.

IE8 demo

2)在伪选择器之后向内容添加隐藏字母.

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

我在条件css中添加了以上内容.因为问题只在IE8中. (我没有在IE9测试)

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

IE8 demo

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

猜你在找的HTML相关文章