填充表內div與有和沒有滾動條

我有一個封閉表的div。 Div有20px的填充。如果表格大小超過div，那麼應該在div上顯示滾動條。填充表內div與有和沒有滾動條

問題：當滾動條不存在時，填充工作正常。但是，當滾動條存在時，滾動條完全佔據右側填充。但是一些底部填充仍然是如何應用滾動條的事件。

問題：如何給20釐米填充div和確保其內容做滾動條的填充計算，如果存在其他從div的邊界？注意：不能在表格元素中指定樣式。由於此表不知道div包裝。

附上示例代碼和輸出圖像。

<html> 
<head> 
<style type="text/css"> 
.parentDiv { 
    border: 1px solid red; 
    height: 50px; 
    width: 200px; 
    overflow: auto; 
    padding: 20px; 
} 

.childDiv { 
    border: 1px solid blue; 
} 
</style> 
</head> 
<body> 
    <div class="parentDiv"> 
     <table class="childDiv" width="100%" height="100%"> 
     <tr> 
      <td></td> 
     </tr> 
     </table> 
    </div> 
    <br/> 
    <div class="parentDiv"> 
     <table class="childDiv" width="100%" height="100%"> 
     <tr> 
      <td><pre>Sample text <input type="textbox"/></pre><br/>Sample second line</td> 
     </tr> 
     </table> 
    </div> 
</body> 
</html>

輸出： enter image description here

來源

2012-05-17 Barath

採取填充了parentDiv類的，包裹表中一個新的div - 你仍然會得到在parentDiv滾動條，但你的div容器應壓縮桌子以適應他們。

試試這個：

<div class="parentDiv">   
    <div class="childDiv">     
     <table>    
      <tr>    
       <td></td>    
      </tr>   
     </table>  
    </div> 
</div> 


<style type="text/css">   
    .parentDiv {    
     border: 1px solid red; 
     width: 200px; 
     overflow:auto; 
}  


    .childDiv {    
     border: 1px solid blue; 
     padding: 20px; 
     width:100%; 
     height:100%;   
    }   
</style>

你會發現，當你增加表的高度，下緣脫落的div底部 - 你可以向下滾動才能看到它。

你可以到新的div移動滾動：

<style type="text/css">   
    .parentDiv {    
     border: 1px solid red; 
     width: 200px; 
     padding: 20px;   
    }  


    .childDiv {    
     border: 1px solid blue; 
     width:100%; 
     overflow-y:auto; 
     height:50px;   
    }   
</style>

來源

2012-05-17 13:11:47

填充表內div與有和沒有滾動條

回答

相關問題