表里面一个div与最大高度 [英] Table inside a div with max-height
问题描述
我想要一个可滚动的表。为了实现这一点，我将< table> 包装到< div> > max-height 和 overflow：auto 。此外，< div> 有 display：inline-block ，以确保div将其宽度调整为
I want a scrollable table. To achieve that, I wrap a <table> into a <div> with a max-height and overflow: auto. In addition, the <div> has display: inline-block to ensure that the div adjusts its width to the underlying table.
<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>
在大多数浏览器（Firefox，Safari和Chrome）中，这会导致一个问题：添加垂直滚动条 使得div更宽，从而使文本换行：
In most browsers (Firefox, Safari, Chrome), this causes a problem: If the table is longer than 100px, vertical scroll bars are added without making the div wider, causing the text to wrap:
在IE中它看起来正确：
In IE it looks "correct":
有没有办法解决这个问题？
Is there a way to fix this?
推荐答案
所以发生的是滚动条渲染之前，它设置表的宽度==包含div的宽度。所以，对于对话，让我们说div的宽度是100px，滚动条的宽度是10px，内表的宽度是100px。当浏览器尝试呈现div时，它假定总宽度为100像素。然后它沿着它的快乐方式呈现div的内容。然后滚动条被添加，div的内容现在总宽度为110px（表+滚动条），但div的宽度仍为100px。所以基本上，浏览器试图在100px的容器中渲染110px，导致你看到的包装。
So whats happening is BEFORE the scroll bar is rendering, it is setting the width of the table == width of the containing div. So, for conversations sake, lets say the width of the div is 100px and the width of the scroll bar is 10px, and the width of the inner table is 100px. When the browser is trying to render the div, it assumes a total width of 100px. It then goes along its merry way rendering the contents of the div. Then the scroll bar is added and the contents of the div now have a total width of 110px (table + scroll bar) but the width of the div is still 100px. So basically, the browser is trying to render 110px inside a 100px container, causing the wrap that you're seeing.
这就是为什么添加第二个div，然后给划分一个边距，使滚动条适合，工作。我给了这个在IE8的一个镜头，它不添加额外的空间（像我原以为它会）。值得注意的是，当在兼容模式下这样做时，div占用了页面的整个宽度。这发生在我的例子，与你的。我不知道如何解决这个问题;但这是这个问题的主题。我没有时间给IE7一个镜头。
That is why adding a second div, and then giving that div a margin so the scroll bar will fit, works. I gave this a shot in IE8 and it doesn't add extra space (like I originally thought it would). Its worth noting that when you do this in compatibility mode, the div takes up the entire width of the page. This happens in my example, and with yours. I don't know how to fix that; but that is off topic for this question. I didn't have time to give IE7 a shot.
这是一个有点干净，也可以工作，当一行的内容更宽：
This is a little bit cleaner and also that it works when the content of one of the rows is much wider:
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>
这篇关于表里面一个div与最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
