由於垂直滾動條出現水平滾動 - 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>

來源

2013-02-12 Arun

指定的寬度對C股利和不定義任何寬度爲表，以便在這種情況下，表將繼承çdiv的寬度。現在玩表的溢出屬性。所以，現在滾動條只會出現在表格獲得更多數據的情況下，並且由於它的寬度將比c div的定義多。

overflow:scroll;

來源

2013-02-12 02:02:20

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

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

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

我與表內的元素髮揮各地和寬度改變就好

來源

2013-02-12 02:06:05 kylecblyth

它不是從寬度加上或減去一個固定的量，但如果你已經注意到了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); 
});

來源

2013-02-12 04:50:56

由於垂直滾動條出現水平滾動 - HTML佈局

回答

相關問題