css - 滚动 div : Fill div, 中的表格，但防止不必要的水平滚动条

Question

div.GridViewScrollContainer
{
    overflow:auto;
    position: relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div.GridViewScrollContainer table
{
    border-spacing:0;
    margin:0;
    border-collapse:collapse;
    padding:0;
}

因此，我在某个高度/宽度受限的相对定位元素内的 div 中呈现一个表格。大多数情况下，.GridViewScrollContainer 可以很好地垂直滚动。

但是，有时我的表格只有一两列，表格和垂直滚动条之间有空间，这看起来很有趣。我只想让我的表格填满“.GridViewScrollContainer”中的整个水平空间。

因此，为了实现这一点，我将“width:100%”添加到我的“div.GridViewScrollContainer table”定义中。这行得通，除了当 div 有一个垂直滚动条时，现在还会有一个水平滚动条，它只用于滚动垂直滚动条的宽度。

接下来，我尝试用下面的脚本代替“width:100%”来修复它，它在大多数情况下都有效，但是 DHTML/AJAX 意味着我需要在各种情况下调用脚本并且我找不到所有的。

$(function() {
    $("div.GridViewScrollContainer table").each(function() {
        if ((this.offsetParent.scrollWidth - this.clientWidth) > 2)
            $(this).width("100%");
    });
});

最后，我发现了下面这个问题，看起来和我的情况是一样的，但是并没有真正的答案。 Related Question. .有没有人有任何想法......我只想明智地填充 div 宽度并且只在必要时有垂直/水平滚动条。非常感谢。

仅限 IE7!

Answer 1

您可以使用 CSS 隐藏水平滚动条。在您的容器 DIV 上使用以下 CSS:

overflow-x: hidden;

这将消除由表格引起的水平滚动条。只需确保表格不会超出父 DIV 的宽度即可。