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％

回答

相關問題