在我的项目中,我试图tbody在IE8中进行滚动。我知道只要给overflow: auto即可滚动显示tbody。但这在IE8中不起作用。为了使其在IE8工作,tbody必须给予position: absolute(或float: left双方thead和tbody)。如果我进行此overflow: auto工作,则忽略我分配给th和的宽度td。这又不让tr占据全宽thead和tbody。因此,tr和tbody/ 之间有一个令人讨厌的空间thead。
tbody
overflow: auto
position: absolute
float: left
thead
th
td
tr
请在IE8中测试此 演示。( 在Firefox和Chrome中可以正常使用 )
这是 小提琴中的代码。
这是我不能改变的严格要点
其实,我确实通过如下肮脏的方法解决了
th:after,td:after{ /* only to the last column, first occurence */ content: "..................................................."; visibility: hidden; }
上面的代码也可以通过在开发人员工具中给特定的td / th加上很多点来检查
上面的代码看起来还不错,但我只需要将:after伪选择器提供给第一行最后一列th和tr。如果我给所有th,tr然后布局搞砸了。并且dots如果tr和之间的空白空间更大,则必须增加tbody。那么当然这只能动态地实现,而这在我当前的项目中是无法做到的。
:after
dots
PS: 我也许做错了。 我只是分享自己的努力,我非常接近结果。
我在IE8中找到了两种解决此问题的方法。
1) 添加附加td的元件width: 0px,以tr“THEAD和TBODY的第
width: 0px
2) 在after伪选择器的内容中添加一个隐藏字母。
after
tr:after{ content: "."; visibility: hidden; }
我在条件CSS中添加了以上内容。因为问题仅在IE8中。( 我尚未在IE9 +中进行测试 )
<!--[if IE 8]> <style> /* the above css code here */ </style> <![endif]-->
我使用了后者,因为它很简单。