CODEWITHSUNDEEP
csscss-tables
stef
stef

Reputation: 27749

Limiting table width

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?

Upvotes: 19

Views: 21927

Answers (4)

Pete
Pete

Reputation: 1044

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

table{
  table-layout:fixed;
}

Upvotes: 41

jeroen
jeroen

Reputation: 91734

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.

Upvotes: 0

rahul
rahul

Reputation: 187040

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.

Upvotes: 3

n1313
n1313

Reputation: 21381

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

Upvotes: 1

Related Questions