Tables overflowing with CSS in Firefox

Question

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:

Answer 1

Wrap your table in a div and set overflow for the div.

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

Answer 2

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