css: limiting table width

Question

i have am html table that can be max 700px wide and i dont know how many columns there will be (between 3 and 10). i want all elements to have 5px padding, but this increases the width of the table and causes the div in which it sits to show horizontal scrollbars.

since i dont know the nbr of columns, its not possible to subtract the extra px added by the padding from the total width.

putting an overflow value on the div has no point since it will just obscure the columns beyond 700px.

is there a way to get around this, to set a proper hard limit on the width of the table?

Answer 1

Set table width to 100% and its parent div width to 700px.

Answer 2

The best possible solution for this is the one you are using now.

Since you cannot predict the number of columns you cannot set a width to each column. So setting the overflow of the parent div to auto and the child table width to 100% is the best solution.

Answer 3

What are you setting the padding on?

If you set the width on the table and the padding on the td you should be able to get exactly what you want.