views:

428

answers:

1

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 serveral 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%; }
+2  A: 

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:

K Prime
Overflow should work in cells according to spec. In practice `hidden` works but scrolling doesn't, except in WebKit.
bobince
Thanks. I tried to use white-space: nowrap in a td element and I noticed that the width of my table suddenly ballooned even though I set the width to 100%; but, after adding table-layout: fixed to the CSS that fixed the problem!
AbeP