13

在我的项目中，我试图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必须增加。然后当然这只能动态实现，而我在当前项目中无法做到这一点。trtbody

PS：我可能做错了。我只是在非常接近结果的地方分享我的努力。

4

1 回答 1

12

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

       1)   添加额外td元素width: 0pxtotr的 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 演示

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

于 2013-06-12T11:34:12.023 回答