Firefox中使用CSS溢出的表格 [英] Tables overflowing with CSS in Firefox

问题描述

我无法让我的桌子行事。内容不断溢出，我试图限制它不产生预期的效果。

这是我的标记：

 < div class =repeatingdiv> 
< div class =hastitle>部分标题< / 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设置为hidden / auto 。我确实有更好的运气在包含该表的 hastable 类中设置溢出。但是我仍然无法使用 Firefox 来尊重宽度分配给3列： 30％，35％，35％。我也尝试设置 min-width ，但仍然没有运气。我在页面上有几个这样的表格，每个表格都有自己的宽度。这个表的任何帮助混乱？

  .repeatingdiv {} 
 .hastitle {margin：0 10px; padding：3px 3px 1px 6px; } 
 .hastable {overflow：hidden; 
文本溢出：省略号; 
 margin：10px; 
 padding：10px; 
} 
 table {} 
 table tbody {width：100％; } 
 tr {width：100％; } 
 td.col1 {width：30％;最小宽度：30％; } 
 td.col2 {width：35％;最小宽度：35％; } 
 td.col3 {width：35％;最小宽度：35％;这个表是非常难以风格化的。表格是非常难以设计的。尝试添加到您的CSS：
  table {table-layout：fixed;宽度：100％/ *或任何固定宽度* /; } 
  
我也建议使用实际的HTML  COL 
  COLGROUP 元素定义您的列， <表> 
< 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 不影响细胞。
 
 
 Ref： 
 
 
 
 
  CSS：Table Layout ，
 
 
  HTML：COLGROUP  
 
 
 
I'm having trouble getting my table to behave. The content keeps overflowing and my attempts to restrict it are not producing the desired effect.

This is my markup:
<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>
I then have some style. The td's are overflowing, but I didn't have any luck setting their overflow to hidden/auto. I did have better luck setting overflow in the hastable class that contains the table. But I'm still having trouble getting Firefox to respect the width distribution for the 3 columns: 30%, 35%, 35%. I also tried setting min-width, but still no luck. I have several of these tables on the page, and each one takes its own width. Any help with this table mess?
.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%; }

解决方案
Tables are notoriously difficult to style. Try adding this to your CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
I'd also suggest using actual HTML COL / COLGROUP elements to define your columns, as so:
<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>
Do take note that, despite this, cells with overflowing data will force the containing cell, row, and table to expand to fit. CSS overflow: auto / hidden / scroll do not affect cells.

Ref: 


CSS: Table Layout, 
HTML: COLGROUP


                        
这篇关于Firefox中使用CSS溢出的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！