DIV：工作台宽度内溢出汽车：100％

我想有一个div与具有100％宽度的表格中水平滚动条：DIV：工作台宽度内溢出汽车：100％

<div id="div1" style="border: thin solid red; width: 800px; height: 150px;"> 
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;"> 
     <tr> 
      <td> 
       <div id="div2" style="border: thin solid black; width: 100%; height: 150px; overflow: auto;"> 
        <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div>

我不知道为什么，但所有的浏览器显示#div2 1000px宽而不是800px。这是为什么？

我如何能实现显示仅800像素宽，里面有一个#div2滚动条？

我不想指定<td>标签准确宽度。

来源

2011-12-23 Jirka Meluzin

要div的ID div1添加overflow: hidden

你的第一行应该是这样的：

<div id="div1" style="border: thin solid red; width: 800px; height: 150px; overflow: hidden;">

来源

2011-12-23 12:37:39 Lucas

那么，它隐藏了DIV3的重叠部分，但不能添加滚动条DIV2。：/ – 2011-12-23 13:01:46

因为#div2的子元素（#div3）有1000px宽度。

来源

2011-12-23 12:38:55

是的，div3的宽度是1000px，所以我想在div2上显示滚动条。 – 2011-12-23 13:00:44

你必须改变DIV2的宽度为100％与800像素，否则就只是把其子DIV3的宽度。

编辑：如果您无法使用固定宽度，你可以设置所有的表元素为display：block - 标准表有处理维度一个非常尴尬的方式，这就是为什么你的例子没有工作。下行这种解决方案是，当然，我记得你的表不会像表了反应......

http://jsfiddle.net/WKG5F/

来源

2011-12-23 12:39:56 ptriek

嗯，不好，因为实际上div1可以相当远和难以找到。而且也会有一些闪烁，直到JavaScript的设置适当的值... – 2011-12-23 12:54:13

编辑：也尝试在IE浏览器不工作，反正感谢 – 2011-12-23 14:49:22

，在div-S和表-S不喜欢每其他:)尝试给800px宽度的div2。还使用overflow:scroll为具有滚动条这里是JSFiddle 和代码：

<div id="div1" style="border: thin solid red; width: 800px; height: 150px;"> 
    <table id="table1" style="border: thin solid yellow; width: 100%; display: block;"> 
     <tr> 
      <td> 
       <div id="div2" style="border: thin solid black; width: 800px; height: 150px; overflow: scroll;"> 
        <div id="div3" style="border: thin solid blue; width: 1000px;">Hello</div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div>

来源

2011-12-23 12:42:11 ArVan

是这样的作品，但我不知道该DIV1在渲染时间上的宽度服务器和宽度可能会因为其他内容而有所不同。 – 2011-12-23 13:03:25

Yoy知道外部div的宽度正确吗？ – ArVan 2011-12-23 13:09:01

这是一个复杂情况的例子。外部div由用户（模式面板窗口）的大小，我没有控制（我使用丰富的RichFaces：模态面板）。 – 2011-12-23 14:51:28

包装纸div2单个细胞表内与style="table-layout: fixed; width: 100%"似乎是一个解决方案。见http://jsfiddle.net/gvqVN/1/。

来源

2012-09-02 18:51:26

为什么这不被标记为接受？这是正确的解决方案。 – 2013-10-25 09:48:01

DIV：工作台宽度内溢出汽车：100％

回答

相关问题