Question

I have an html table that can be max 700px wide and I don’t know how many columns there will be (between 3 and 10). I want all <th> 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 don’t know the number 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

Use the CSS below and this should prevent your table exceeding the maximum size you define:

table{
  table-layout:fixed;
}