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

Posted 2023-03-06

【中文标题】如何控制 Firefox 中表格单元格的溢出？

【英文标题】：How to control overflow of table cell in Firefox?

【发布时间】：2013-01-10 22:43:10

【问题描述】：

我有一个表格，希望第一列有一个垂直滚动条。这适用于 iPad 上的 Chrome、IE9、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;

【问题讨论】：

什么时候需要滚动条出现？

可能有大约 100 个“测试”行，我只希望这个单元格有一个滚动条。使用此代码，我在整个页面的右侧得到一个滚动条（使用 Firefox，其他浏览器都可以）。

【参考方案1】：

问题：

overflow:scroll; 不能在 table 中工作。

如果您对div 执行相同操作，那么它会正常工作。

见Live Example

例子：

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