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's 已经满溢了，但我没有运气设置它们 overflow to hidden/auto. 。我确实有更好的运气设置溢出 hastable 包含该表的类。但我仍然遇到困难 火狐浏览器 尊重 width 3 列的分布： 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%; }

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：科尔集团

Answer 2

包装你表中一个div和用于在div设定溢出。

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