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

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:

 
 
 
 
     
 

 
   
  

   
Col 1
   
Col 2
   
Col 3
  
 

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