在Firefox中使用CSS溢出的表格

我无法让我的表表现正常。内容不断溢出，我试图限制它不会产生预期的效果。在Firefox中使用CSS溢出的表格

这是我的标记：

<div class="repeatingdiv"> 
<div class="hastitle">Some title</div> 
<div class="hastable"> 
    <table> 
    <thead><tr><th></th></tr></thead>  
    <tfoot><tr><th></th></tr></tfoot> 
    <tbody> 
    <tr> 
    <td class="col1">Col 1</td> 
    <td class="col2">Col 2</td> 
    <td class="col3">Col 3</td> 
    </tr> 
    </tbody> 
    </table> 
</div> 
</div>

我那么有一些风格。 td's溢出，但我没有任何运气设置他们的overflow to hidden/auto。在包含表的hastable类中，我确实有更好的运气设置溢出。但是我仍然无法让Firefox尊重3列中的width分布：30%, 35%, 35%。我也尝试设置min-width，但仍然没有运气。我在页面上有几个这样的表格，每个表格都有自己的宽度。这张桌子的任何帮助都搞乱了？

.repeatingdiv { } 
.hastitle  { margin:0 10px; padding:3px 3px 1px 6px; }  
.hastable  { overflow:hidden; 
       text-overflow: ellipsis; 
       margin:10px; 
       padding:10px; 
       } 
table   { } 
table tbody { width: 100%; } 
tr { width: 100%; } 
td.col1  { width:30%; min-width:30%; } 
td.col2 { width:35%; min-width:35%; } 
td.col3 { width:35%; min-width:35%; }

来源

2009-10-30 drummer

表格非常难以风格。尝试添加这对你的CSS：

table { table-layout: fixed; width: 100% /* or whatever fixed width */; }

我也建议使用实际的HTML COL/COLGROUP元素来定义你的列，如这样：

<table> 
<colgroup class="col1" /> 
<colgroup class="col2" /> 
<colgroup class="col3" /> 
<thead><tr><th></th></tr></thead>  
<tfoot><tr><th></th></tr></tfoot> 
<tbody> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    <td>Col 3</td> 
    </tr> 
</tbody> 
</table>

确实会注意到，尽管这样，细胞与溢出的数据将强制包含的单元格，行和表扩展到适合。 CSS overflow: auto/hidden/scroll不影响单元格。

编号：

来源

2009-10-30 09:45:03

溢出应根据规范在单元中工作。在实践中'隐藏'工程，但滚动不，除了在WebKit。 – bobince 2009-10-30 14:38:51

谢谢。我尝试在td元素中使用white-space：nowrap，并且我注意到即使将宽度设置为100％，表格的宽度也会突然膨胀。但是，添加表格布局后：固定到解决问题的CSS！ – Abe 2010-01-07 23:16:39

包装你表中一个div，并设置溢流的股利。

<div style='overflow:scroll;'> 
    <table> 
     ... 
    </table> 
</div>

来源

2013-04-09 07:42:51

在Firefox中使用CSS溢出的表格

回答

相关问题