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中的行为相同。这意味着桌子不会缩小。换句话说，我需要表格显示与溢出div不存在相同的方式。

Answer 1

您可以添加

.myTable{
white-space: nowrap;
}

但它似乎是一个水平滚动条。

然后，您可以添加

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

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

Answer 2

您可以替换

.scroll {
    height: 150px;
    overflow-y: auto;
}

与

.scroll {
    height: 150px;
    overflow-y: scroll;
}

但问题是，如果桌子的高度可以小于150px，那么即使没有必要，也会有一个滚动条。

修改

对不起，你已经知道了。

但我会选择适用于兼容浏览器的解决方案。

对于使用IE的用户，您可以尝试使用javascript解决方案：http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

在宽度未知的表上溢出

2 个答案: