我想要一个可滚动的表格。为了实现这一点，我包装了一个<table> into a <div> with a max-height and overflow: auto。除此之外<div> has 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，则会添加垂直滚动条without使 div 更宽，导致文本换行：
在 IE 中它看起来“正确”：
有没有办法来解决这个问题？
http://jsfiddle.net/3VSZE/44/ http://jsfiddle.net/3VSZE/44/
所以发生的事情是在滚动条渲染之前，它设置表格的宽度==包含的div的宽度。因此，为了方便对话，假设 div 的宽度为 100px，滚动条的宽度为 10px，内表的宽度为 100px。当浏览器尝试渲染 div 时，它假定总宽度为 100px。然后它会沿着它快乐的方式渲染 div 的内容。然后添加滚动条，div 的内容现在总宽度为 110px（表格 + 滚动条），但 div 的宽度仍然是 100px。所以基本上，浏览器试图在 100px 容器内渲染 110px，从而导致您看到的换行。
这就是为什么添加第二个 div，然后给该 div 留出边距以便滚动条适合的原因。我在 IE8 中尝试了一下，它并没有增加额外的空间（就像我最初想象的那样）。值得注意的是，当您在兼容模式下执行此操作时，div 会占据页面的整个宽度。这在我的例子和你的例子中都会发生。我不知道如何解决这个问题；但这不是这个问题的主题。我没有时间尝试 IE7。
这更干净一点，而且当其中一行的内容更宽时它也可以工作：
http://jsfiddle.net/3VSZE/75/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
