显示器上出现水平滚动条：表格元素答案

【问题标题】：Horizontal scrollbar appearing on display: table element显示器上出现水平滚动条：表格元素
【发布时间】：2014-10-31 13:50:44
【问题描述】：

我有一个这样的简单页面布局：

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.table-wrapper {
    display: table;
    width: 1366px;
    height: 100%;
}

.cell-left {
    display: table-cell;
    width: 240px;
}

.cell-right {
    display: table-cell;
    width: 1126px;
}

HTML：

<div class="table-wrapper">
    <div class="cell-left"></div>
    <div class="cell-right">

    /* Some really long content */

    </div>
</div>

当 .cell-right 中的内容长到足以让浏览器显示垂直滚动条时，它还会添加水平滚动条，这真的会破坏我的布局。如果我在 .table-wrapper 上放置 100% 的宽度，问题就会消失，但它也会缩小我不想要的两个单元格。我必须在所有 3 个元素上都有固定的宽度，才能对项目需要的响应式设计进行适当的调整。此外，两个单元格都需要跨越文档高度。

有趣的是，Internet Explorer 11 没有这个问题，但 Firefox 和 Chrome 都有。如何防止出现水平滚动条？

编辑

我忘了补充说我正在 1366x768 的屏幕分辨率上测试这个。如果您想在自己的屏幕分辨率上自行测试，只需更改数字即可。

这是小提琴：

http://fiddle.jshell.net/zddm6asz/1/show/

这是另一个 1920x1200 的：

http://fiddle.jshell.net/zddm6asz/2/show/

【问题讨论】：

哪个滚动条？ jsfiddle.net/zddm6asz
尝试在 jsFiddle 之外测试它，它没有显示在那里
注意框架网址是fiddle.jshell.net/zddm6asz/show
这是正确的例子fiddle.jshell.net/zddm6asz/1/show

标签： html css

【解决方案1】：

编辑：在尝试之前，请参阅我在此答案下的第一条评论。

如果你添加

overflow-x: hidden;

对于.cell-left 和.cell-right，这应该可以防止单元格获得水平滚动条。

【讨论】：

我设置了一个小小提琴，只是稍微减小了整体宽度，所以如果你愿意，它可以更好地适应屏幕。 [jsfiddle.net/zz5rr41L/3/]我能看到的唯一水平滚动条不是来自单元格，它是由正文本身生成的，如果表格不适合您的屏幕。因此，overflow-x: hidden; 的单元格将无济于事。
它不会将水平条添加到单元格中，而是将其添加到整个页面中，这没有意义，因为表格本身不会超过屏幕宽度。
参考您对问题的编辑。如果您的屏幕分辨率为 1366 宽，则宽度为 1366px 的元素将是屏幕宽度。浏览器并不总是最大化，并且从 1366px 屏幕宽度中您还必须减去垂直滚动条的宽度。
是的，这正是我所做的，我必须减去滚动条的宽度 17px。 Internet Explorer 没有这个问题，因为它将滚动条放在内容的顶部。

【解决方案2】：

当我使用 display:table-cell; 时出现水平滚动条时，我遇到了同样的问题。对于某些元素。滚动条应用于整个页面，但应用了溢出：隐藏；到这些单元格的包含元素解决了这个问题。在您的情况下，将应用溢出：隐藏；到.table-wrapper。

此外，您可能不想为表格包装器设置像素宽度。如果可能，为什么不将其设置为具有最大宽度的百分比？如果您正在尝试响应式设计，则尤其如此。

【讨论】：