在IE8的表tbody滚动 [英] Table tbody scroll in IE8

问题描述

在我的项目中，我试图使 tbody 在IE8中滚动。我知道它可以通过 overflow：auto 到 tbody 滚动。但这不工作在IE8。要使其在IE8中工作，必须给予 tbody position：absolute （或 float ：left 指向 thead 和 tbody ）。如果我让 overflow：auto 工作，那么我分配给 th 和 td 的百分比被忽略。这又不会让 tr 占用 thead 和 tbody code>。因此， tr 和 tbody之间存在刺激性空间 / thead 。

请测试此 演示 。 （在firefox和chrome 中工作正常）

，这里是 fiddle 。

这里是我不能更改的严格点

• 宽度至 td 和 th


• 我无法更改HTML标记


• 必须使用CSS来解决。

其实，我用一个脏修复解决了它，如下

< pre class =lang-css prettyprint-override> th：after，td：after {/ *只到最后一列，第一次出现* /
content：..... ..............................................
visibility：hidden;
}


上述代码也可以通过给在开发人员工具中的具体td / th

上面的代码看起来确定，但我需要给：伪选择器只到第一行最后一列 th 和 tr 。如果我给每个 th 和 tr ，那么布局是乱七八糟。并且如果 tr 和 tbody 之间的空白空间必须增加 dots code>是更多。然后当然，这可以只实现动态，我不能在我目前的项目。

PS：我可能会做错了。

解决方案

我发现了两种方法来解决这个问题在IE8。

        1） code> td 的元素 width：0px 至 tr 和tbody。

IE8演示

        2） c>之后，的内容中添加隐藏的字母。

 之后{
 content：。; 
 visibility：hidden; 
} 
  

我在条件css中添加了上述。因为问题只在于IE8。 （）

 <！ -  [if IE 8] > 
< style> 
 / *上面的css代码这里* / 
< / style> 
<！[endif]  - > 
  

IE8 demo

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

In my project, I am trying to make the tbody scroll in IE8. I know it can be scrolled by just giving overflow: auto to tbody. But this doesn't work in IE8. To make it work in IE8, the tbody must be given position: absolute (or float: left to both thead and tbody). If I make the overflow: auto work then the widths which I assigned to the th and td in percentages is being ignored. which in turn not letting the tr to occupy the full width in thead and tbody. Hence, there is a irritating space between tr and tbody/thead.

Please test this demo in IE8. (works fine in firefox and chrome)

and here is the code in fiddle.

Here are the strict points which I can't change

• Width to td and th must be in percentages.
• I can't change HTML markup
• It must be solved using just CSS.

Actually, I did solve it with a dirty fix which is as follows

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

The above code can also be checked by giving many dots to a specific td/th in developer tools

The above code looks ok but I need to give the :after pseudo selector only to the first row last column th and tr. If I give to every th and tr then the layout is messing up. and also the dots must be increased if the empty space between the tr and tbody is more. Then ofcourse this could be achieved only dynamically which I can't do in my current project.

PS: I maybe doing it completely wrong. I am just sharing my efforts where I reached very close to the result.

解决方案

I found two ways to solve this problem in IE8.

       1)   Adding extra td element of width: 0px to tr's of thead and tbody.

IE8 demo

       2)   Adding a hidden letter to content of after pseudo selector.

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

I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)

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

IE8 demo

I used the latter one because it is simple.

这篇关于在IE8的表tbody滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！