Question

我已将封闭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

指定c div的宽度，不要为表定义任何宽度，因此在这种情况下，表将继承c div的宽度。现在播放表的溢出属性。因此，现在只有在表获得更多数据时才会出现滚动条，因此其宽度将大于为c div定义的宽度。

    overflow:scroll;

Answer 2

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

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

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

我玩了桌子里面的元素，宽度变化很好

Answer 3

这不是关于在宽度上添加或减去固定数量，而是如果您注意到CSS padding: 5px会将div的宽度增加2倍，填充为padding-left和padding-right会出现在图片中。所以你需要添加精确的填充量，在这种情况下是10px。

您可以像

那样计算宽度和填充

$(function(){
    var toBeWidth = $("#t1").width() + (parseInt($("#t1").css("padding-left").split("px")[0])*2)
    $("#c").width(toBeWidth);
    $("#c").height(150);
});

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

3 个答案: