1. 首頁
  2. 問答
  3. 帶有最大高度的div表格

帶有最大高度的div表格

2011-08-19 229 views
4

我想要一個可滾動的表格。爲了達到這個目的，我用max-height和overflow: auto將<table>包裝成<div>。另外，<div>有display: inline-block以確保div將其寬度調整爲基礎表。帶有最大高度的div表格

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     div { max-height: 100px; display: inline-block; 
       overflow: auto; border: 1px solid red; } 
     td { border-bottom: 1px solid black; } 
    </style> 
</head> 
<body> 
    <div> 
     <table> 
      <tr><td>bla bla bla bla bla</td></tr> 
      <tr><td>bla bla bla bla bla</td></tr> 
      <tr><td>bla bla bla bla bla</td></tr> 
      <tr><td>bla bla bla bla bla</td></tr> 
      <tr><td>bla bla bla bla bla</td></tr> 
      <tr><td>bla bla bla bla bla</td></tr> 
      <tr><td>bla bla bla bla bla</td></tr> 
     </table> 
    </div> 
</body> 
</html>

在大多數瀏覽器（火狐，Safari，Chrome瀏覽器），這將導致一個問題：如果表比100px的時間越長，垂直滾動條添加沒有使格寬，導致文本換行：

Firefox screenshot

在IE瀏覽器，它看起來 「正確」：

IE screenshot

有沒有辦法解決這個問題？

來源

2011-08-19 Heinzi

+0

剛一說明，這確實在歌劇作品。 – Exelian

回答

4

http://jsfiddle.net/3VSZE/44/

所以發生了什麼是之前滾動條渲染，它被設置表格的寬度==含有的寬度DIV。所以，爲了對話，可以說div的寬度是100px，滾動條的寬度是10px，內部表的寬度是100px。當瀏覽器嘗試渲染div時，它假定總寬度爲100px。然後它沿着它渲染div的內容的快樂方式。然後添加滾動條，現在div的內容總寬度爲110px（表格+滾動條），但div的寬度仍爲100px。所以基本上，瀏覽器試圖在一個100像素的容器內渲染110px，導致你看到的包裝。

這就是爲什麼添加第二個div，然後給該div一個邊距以便滾動條適合的原因。我在IE8中給了這個鏡頭，它不會增加額外的空間（就像我原先認爲的那樣）。值得注意的是，當您以兼容模式執行此操作時，div將佔用頁面的整個寬度。這發生在我的例子中，和你的。我不知道如何解決這個問題。但這是這個問題的主題。我沒有時間給IE7一個鏡頭。

這是一個有點清潔，也是它的工作原理，當行之一的內容更爲廣泛：

http://jsfiddle.net/3VSZE/75/

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     .a { border: 1px solid red; display: inline-block; } 
     .b { width: 100%; overflow: auto; max-height:100px; margin-right: 18px; } 
     td { border-bottom: 1px solid black; } 
    </style> 
</head> 
<body> 
    <div class="a"> 
     <div class="b"> 
      <table> 
       <tr><td>bla bla bla bla bla</td></tr> 
       <tr><td>bla bla bla bla bla</td></tr> 
       <tr><td>bla bla bla bla bla</td></tr> 
       <tr><td>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</td></tr> 
       <tr><td>bla bla bla bla bla</td></tr> 
       <tr><td>bla bla bla bla bla</td></tr> 
       <tr><td>bla bla bla bla bla</td></tr> 
      </table> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-08-19 14:41:23 Dave

+1

很好，謝謝。我已經添加了'來防止IE進入兼容模式。 – Heinzi

相關問題

 相關問題