如何控制Firefox的表格单元格溢出？ [英] How to control overflow of table cell in Firefox?

问题描述

我有一个表，并希望第一列有一个垂直滚动条。这适用于Chrome浏览器，IE9，Safari上的iPad，但不是在Firefox？为什么不？我在做什么错了？

HTML：

 < table> ; 
< tbody> 
< tr> 
< td class =col1> 
< div class =wrapper> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
 ... 
< / div> 
< / td> 
< td class =col2> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

CSS：

  html，body {
 margin：0; 
 padding：0; 
身高：100％; 
宽度：100％; 
} 
 
表格{
 width：100％; 
身高：100％; 
} 
 
表.col1 {
 width：20％; 
身高：100％; 
} 
 
表.col1> div.wrapper {
 width：100％; 
身高：100％; 
溢出：auto; 
} 
 
表.col2 {
 width：80％; 
身高：100％; 
 background-color：red; 
 
  

解决方案

>

overflow：scroll; 在表内不起作用。

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

请参阅实例

HTML

 < div class =col1> 
< div class =wrapper> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
< p>测试< / p> 
 ... 
< / div> 
< / div>< div class =col2> 
< / div> 
  

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

感谢 kirtan

I have a table and want the first columns to have a vertical scroll bar. This works in Chrome, IE9, Safari on iPad but not in Firefox? Why not? What am I doing wrong?

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

解决方案

The issue:

overflow:scroll; won't work inside a table.

If you do the same with a div, then it will work fine.

See Live Example

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>

More read: http://lists.w3.org/Archives/Public/www-style/2006Mar/0030.html#replies

Thanks to kirtan

这篇关于如何控制Firefox的表格单元格溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！