如何在Firefox中控制表格单元格的溢出？

Question

我可以帮您翻译成中文。这段内容是关于表格的，想要第一列出现垂直滚动条。在Chrome、IE9和iPad的Safari浏览器中可以实现，但在Firefox浏览器中不行。为什么呢？我做错了什么吗？

HTML代码：

    <table>
        <tbody>
            <tr>
                <td class="col1">
                    <div class="wrapper">
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        ...
                    </div>
                </td>
                <td class="col2">
                </td>
            </tr>
        </tbody>
    </table>

CSS：

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

table {
width: 100%;
height: 100%;
}

table .col1 {
width: 20%;
height: 100%;
}

table .col1>div.wrapper {
width: 100%;
height: 100%;
overflow: auto; 
}

table .col2 {
width: 80%;
height: 100%;
background-color: red;
}

- jlai

---

你需要滚动条何时出现？ - ATOzTOA

可能会有大约100个“测试”行，我只想让这个单元格有一个滚动条。使用这段代码，我在整个页面的右侧获得了一个滚动条（在Firefox中，其他浏览器都可以）。 - jlai

Answer 1

问题：

在 table 中使用 overflow:scroll; 无效。

如果在 div 中使用，就能正常工作。

请参见 实时示例 示例： HTML

<div class="col1" >
    <div class="wrapper">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    ...
    </div>
</div><div class="col2">
</div>

更多阅读：http://lists.w3.org/Archives/Public/www-style/2006Mar/0030.html#replies 感谢kirtan。

- ATOzTOA