没有设置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滚动条？

回答

相关问题