Question

我正在尝试在一个宽度为100％的表格中使用水平滚动条div：

<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
        <tr>
            <td>
                <div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;">
                    <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
                </div>
            </td>
        </tr>
    </table>
</div>

我不知道为什么，但所有浏览器都显示#div2 1000px宽而不是800px。那是为什么？

如何才能将其显示为仅800px宽并且在#div2内有滚动条？

我不想指定<td>标记的确切宽度。

Answer 1

将div2包含在style="table-layout: fixed; width: 100%"的单个单元格表中似乎是一种解决方案。请参阅http://jsfiddle.net/gvqVN/1/。

Answer 2

我记得，div-s和table-s彼此并不喜欢:)尝试给div2提供800px的宽度。还可以使用overflow:scroll来设置滚动条这里是JSFiddle 代码：

<div id="div1" style="border: thin solid red; width: 800px; height: 150px;">
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;">
        <tr>
            <td>
                <div id="div2" style="border: thin solid black; width: 800px; height: 150px; overflow: scroll;">
                    <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div>
                </div>
            </td>
        </tr>
    </table>
</div>

Answer 3

要对div div1添加overflow: hidden

您的第一行应如下所示：

<div id="div1" style="border: thin solid red; width: 800px; height: 150px; overflow: hidden;">

Answer 4

因为#div2的子元素（#div3）的宽度为1000px。

Answer 5

您必须使用800px更改div2上的100％宽度，否则它将只取其子div3的宽度。

编辑：如果你不能使用固定宽度，你可以设置要显示的所有表格元素：块 - 标准表有一个非常笨拙的处理维度的方法，这就是你的例子不起作用的原因。当然，这个解决方案的缺点是你的桌子不再像桌子那样反应......

http://jsfiddle.net/WKG5F/

DIV：表内宽度溢出：100％

5 个答案: