表格單元格水平滾動DIV NOWRAP +溢出：滾動=沒有工作

這按預期工作：表格單元格水平滾動DIV NOWRAP +溢出：滾動=沒有工作

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div style="width:100%"> 

      <div style="margin:0; padding: 0; width: 100%; overflow: auto; white-space:nowrap;"> 
      <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif"> 
      <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif"> 
      <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif"> 
      ... many more 
      </div> 
      <div> 
      Lorem ipsum dolor sit amet... 
      </div> 

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

（這裏試試吧：http://output.jsbin.com/camoku）

股利佔100％的頁面寬度，並且它有一個水平滾動條來滾動瀏覽其溢出的內容。

我希望這個工作完全一樣：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div style="width:100%"> 
    <table style="width:100%" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td> 
      <div style="margin:0; padding: 0; width: 100%; overflow: auto; white-space:nowrap;"> 
      <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif"> 
      <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif"> 
      <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif"> 
      ... 
      </div> 
      <div> 
      Lorem ipsum dolor sit amet... 
      </div> 
     </td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

但是，這是行不通的。該表擴展爲無需滾動託管其所有內容;該div沒有滾動條，而是整個頁面。 http://output.jsbin.com/sagedu

爲什麼不工作，我該如何解決？

來源

2016-05-13 matteo

我找到了解決方案。我需要添加

table-layout:fixed

以表的樣式。

來源

2016-05-13 19:37:36 matteo

表格單元格水平滾動DIV NOWRAP +溢出：滾動=沒有工作

回答

相關問題