html - 分区 :Overflow auto inside Table width: 100%

我想要一个 div在具有 100% 宽度的表格内使用水平滚动条:

<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 1000 像素宽而不是 800 像素。这是为什么？

我如何实现仅显示 800 像素宽并在内部有滚动条 #div2 ？

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

最佳答案

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

关于html - 分区 :Overflow auto inside Table width: 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8616117/