Question

我想要一个可滚动的表格。为实现这一目标，我将<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更宽，从而导致文本换行：

Firefox screenshot

在IE中看起来“正确”：

IE screenshot

有没有办法解决这个问题？

Answer 1

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/

<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>

Answer 2

使用nowrap https://developer.mozilla.org/en/CSS/white-space

将其应用于<td>

在具有最大高度的div内的表

2 个答案: