html - 由于垂直滚动条出现水平滚动条 - HTML 布局

Question

请看一下 http://jsfiddle.net/RRkC7/

我已将封闭的 DIV 标记“c”的宽度精确设置为子表 t1 的宽度。但是，由于水平滚动条，出现了垂直滚动条。理想情况下，由于“c”的宽度与“t1”完全相同，因此不应出现水平滚动。

以及如何避免这种情况的想法。

请注意，我无法对任何内容进行硬编码。当添加更多内容时，内部 TABLE 的宽度可能会增加，当发生这种情况时，我会调整容器 div 标签的大小。

我还希望在表格宽度超过一定数量的情况下出现水平和垂直滚动条。

谢谢， 阿伦

<div id="p" style="overflow:hidden">
    <div id="c" style="overflow:auto">
        <table id="t1">
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
        </table>
    </div> </div>

Answer 1

这可能是因为填充，我不知道，但修改你的 javascript 工作。

$(function(){
    $("#c").width($("#t1").width() + 20);
    $("#c").height(150);
})

http://jsfiddle.net/RRkC7/1/

我摆弄了表格内的元素，宽度改变得很好