在具有最大高度的div内的表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在具有最大高度的div内的表相关的知识，希望对你有一定的参考价值。
我想要一个可滚动的表格。为了达到这个目的，我用<table>和<div>将max-height包裹成overflow: auto。此外，<div>有display: inline-block，以确保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>
在大多数浏览器（Firefox，Safari，Chrome）中，这会导致一个问题：如果表格长度超过100px，则会添加垂直滚动条而不会使div更宽，从而导致文本换行：
在IE中它看起来“正确”：
有没有办法来解决这个问题？
所以发生的事情是在滚动条渲染之前，它设置表格的宽度==包含div的宽度。所以，为了对话，我们可以说div的宽度是100px，滚动条的宽度是10px，内表的宽度是100px。当浏览器尝试渲染div时，它假设总宽度为100px。然后它以愉快的方式呈现div的内容。然后添加滚动条，div的内容现在总宽度为110px（表格+滚动条），但div的宽度仍然是100px。所以基本上，浏览器试图在100px容器内渲染110px，导致你看到的换行。
这就是为什么添加第二个div，然后给该div一个边距，以便滚动条适合，工作。我在IE8中给了它一个镜头，并没有增加额外的空间（就像我原先认为的那样）。值得注意的是，当您在兼容模式下执行此操作时，div占用页面的整个宽度。在我的例子和你的例子中都会发生这种情况。我不知道如何解决这个问题;但这不是这个问题的主题。我没有时间给IE7一个机会。
这有点清洁，并且当其中一行的内容更宽时它也可以工作：
<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>
使用nowrap https://developer.mozilla.org/en/CSS/white-space
将它应用于<td>
以上是关于在具有最大高度的div内的表的主要内容，如果未能解决你的问题，请参考以下文章
使用 CSS 将 div 内的图像向上和/或向下缩放以适应图像的最大边