html - 在未知宽度的 table 上溢出

Question

这段代码有问题:

CSS:

        #pageBound{
            float:left;
            position:relative;
            left: 50%;
        }
        #page{
            float:left;
            position:relative;
            right: 50%;
        }
        .scroll{
            height: 150px;
            overflow-y: auto;
        }
        .myTable{
            border-collapse: collapse;
        }
        .myTable td{
            border: 1px solid black;
            padding: 10px 5px;
        }

HTML

<div id='pageBound'>
    <div id='page'>
        <div class='scroll'>
            <table class='myTable'>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
            </table>
        </div>
    </div>
</div>

这里的工作示例:http://honzabrabec.cz/test/overflow.html

在除 Opera 之外的所有浏览器中，它都会稍微缩小表格(将滚动条附加到内部)，因此表格中的行会中断。在带有填充的表格周围添加另一个包装器并不能解决问题。但是，如果我将 'overflow-y:auto' 更改为 'overflow-y:scroll' 它在除 IE 之外的所有浏览器中都可以正常工作。如果我将另一个带有“overflow-y:scroll”的表格添加到此页面，同样的修复也有效。

我希望它的行为方式与现在在 Opera 中的行为方式相同。这意味着 table 不会缩小。换句话说，我需要表格以与不存在溢出 div 相同的方式显示。

Answer 1

可以添加

.myTable{
white-space: nowrap;
}

但随后它出现了一个水平滚动条。

然后，你可以添加

.myTable{
white-space: nowrap;
margin-right: 17px;/* or more */
}

它适用于 Firefox，但也许有一个浏览器的滚动条为 30px...