一尘不染

IE8中的表格正文滚动

css

在我的项目中,我试图tbody在IE8中进行滚动。我知道只要给overflow: auto即可滚动显示tbody。但这在IE8中不起作用。为了使其在IE8工作,tbody必须给予position: absolute(或float: left双方theadtbody)。如果我进行此overflow: auto工作,则忽略我分配给th和的宽度td。这又不让tr占据全宽theadtbody。因此,trtbody/
之间有一个令人讨厌的空间thead

请在IE8中测试此 演示。( 在Firefox和Chrome中可以正常使用

这是 小提琴中的代码。

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

  • 的宽度,tdth必须为百分比。
  • 我无法更改HTML标记
  • 必须仅使用CSS来解决。

其实,我确实通过如下肮脏的方法解决了

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

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

上面的代码看起来还不错,但我只需要将:after伪选择器提供给第一行最后一列thtr。如果我给所有thtr然后布局搞砸了。并且dots如果tr和之间的空白空间更大,则必须增加tbody。那么当然这只能动态地实现,而这在我当前的项目中是无法做到的。

PS: 我也许做错了。 我只是分享自己的努力,我非常接近结果


阅读 283

收藏
2020-05-16

共1个答案

一尘不染

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

1) 添加附加td的元件width: 0px,以tr“THEAD和TBODY的第

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

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

我在条件CSS中添加了以上内容。因为问题仅在IE8中。( 我尚未在IE9 +中进行测试

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

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

2020-05-16