0

请看一下 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>
4

3 回答 3

0

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

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

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

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

于 2013-02-12T02:06:05.827 回答
0

这不是关于从宽度中添加或减去固定量，而是如果您注意到 CSSpadding: 5px将 div 的宽度增加了 2 倍的填充，padding-left并且padding-right会出现在图片中。因此，您需要添加确切的填充量，在本例中为 10 像素。

您可以计算宽度和填充，如

$(function(){
    var toBeWidth = $("#t1").width() + (parseInt($("#t1").css("padding-left").split("px")[0])*2)
    $("#c").width(toBeWidth);
    $("#c").height(150);
});
于 2013-02-12T04:50:56.713 回答
0

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

    overflow:scroll;
于 2013-02-12T02:02:20.700 回答