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%; }