沒有設置div的寬度，顯示div overflow-x滾動條？

#main { 
margin: auto; 
padding: 0; 
width: 95%; 
} 
#left-wrapper { 
display: block; 
} 
#content { 
height: 500px; 
white-space: nowrap; 
overflow-y: auto; 
overflow-x: scroll; 
} 

<div id="main"> 
    <table> 
     <tr> 
      <td> 
       <div id='left-wrapper'> 
       </div> 
      </td> 
      <td> 
       <div id='content'> 
        <table> 
         <tr> 
          <td> 
          </td> 
          <td> 
          </td> 
          <td> 
          </td> 
         </tr> 
         <tr> 
          <td> 
          </td> 
          <td> 
          </td> 
          <td> 
          </td> 
         </tr> 
         <tr> 
          <td> 
          </td> 
          <td> 
          </td> 
          <td> 
          </td> 
         </tr> 
        </table> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div>

內容包裝器包含一個表，其中包含一些大小未知的數據，並且不能包裝所以白色空間：設置nowrap，並且它工作正常。內容div的高度爲固定大小，垂直滾動條顯示正常。主div的寬度設置爲95％。問題在於，當數據太長而不適合時，內容div不會激活滾動條，而是將其自身調整到屏幕的右側，即使包裝器主div的寬度設置爲95％。有沒有辦法激活內容div的水平滾動條而不設置它的寬度？它的最大寬度應該與主包裝的寬度一致，即使它具有固定的寬度也不會有問題，但是它必須填充剩餘的區域以與它的包裝主div一致，正如我所提到的它的寬度設置爲95％。我到處搜索，日子過去了，我根本找不到合適的解決方案。如果有人有任何建議，我會非常感激。謝謝。沒有設置div的寬度，顯示div overflow-x滾動條？

來源

2011-08-31 andrean

內部<div>將保留在容器<div>與你有CSS。但是，由於圍繞內部<div>的<table>不符合預期。

我認爲解決方案可能是在沒有<table>的情況下佈置頁面。

此示例顯示內部<div>使用當前CSS限制在外部<div>內部。

<html> 
<head> 
    <style> 
    #main {border:solid 2px orange; margin: auto; padding: 0; width: 190px;} 
    #left-wrapper {display: block;} 
    #content {border:solid 2px purple; height: 500px; white-space: nowrap; overflow-y: auto; overflow-x: scroll;} 
    </style> 
</head> 
<body> 
    <div id="main"> 

     <div id='content'> 
     <table style="border:solid 1px #ddd;"> 
      <tr style="background-color:#ccccff;"> 
       <td>column A</td> 
       <td>column B</td> 
       <td>column C</td> 
       <td>column D</td> 
       <td>column E</td> 
      </tr> 
      <tr> 
       <td>1</td><td>2</td><td>3</td><td>2</td><td>3</td> 
      </tr> 
      <tr> 
       <td>11</td><td>12</td><td>11</td><td>12</td><td>13</td> 
      </tr> 
     </table> 
     </div> 

    </div> 
</body> 
</html>

來源

2011-08-31 20:49:00 jim31415

沒有設置div的寬度，顯示div overflow-x滾動條？

回答

相關問題