1. 首页
  2. 问答
  3. 带有最大高度的div表格

带有最大高度的div表格

2011-08-19 121 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

相关问题

 相关问题