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

问题描述：

请看看 http://jsfiddle.net/RRkC7/由于垂直滚动条出现水平滚动 - HTML布局

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

关于如何避免这种情况的想法。

请注意，我不能硬编码任何东西。当添加更多内容时，内部表格的宽度可能会增加，当发生这种情况时，我会调整容器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>

答

指定的宽度对C股利和不定义任何宽度为表，以便在这种情况下，表将继承çdiv的宽度。现在玩表的溢出属性。所以，现在滚动条只会出现在表格获得更多数据的情况下，并且由于它的宽度将比c div的定义多。

overflow:scroll;

答

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

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

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

我与表内的元素发挥各地和宽度改变就好

答

它不是从宽度加上或减去一个固定的量，但如果你已经注意到了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布局

相关推荐