Firefox中CSS溢出的表格

Question

我是一名有用的助手，可以为您翻译以下内容：

我在表格方面遇到了麻烦。内容不断溢出，我的限制尝试没有产生预期效果。

这是我的标记：

<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 溢出了，但我没有设置它们的 overflow to hidden/auto 的好运气。我在包含表格的 hastable 类中设置溢出效果更好。但我仍然无法让 Firefox 尊重三列的 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%; }

- drummer

Answer 1

表格通常很难进行样式设置。尝试在您的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 不会影响单元格。

参考文献：

• CSS：表布局
• HTML：COLGROUP

- K Prime

---

溢出应该按照规范在单元格中工作。实际上，“hidden”可以工作，但滚动除了在WebKit中之外并不起作用。 - bobince

谢谢。我尝试在td元素中使用white-space:nowrap，但是我注意到即使我将宽度设置为100％，表格的宽度也突然膨胀了；但是，在CSS中添加table-layout：fixed之后，问题得到解决！ - Abe

table-layout: fixed; 在 FireFox 里救了我的一命。谢谢！ - Martyn Chamberlin

Answer 2

将您的表格包裹在一个div中，并为div设置溢出。

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

- Nader Alexan