CSS - Equal Table Padding Across All Columns

Question

I have a number of columns in a table each with varying lengths of text. What I would like to do is have all the columns have the same padding left & right, but with the row taking up 100% of the width... so the actual padding amount needs to be dynamically assigned. Is this possible?

Answer 1

It is possible to assign relative values to padding padding-left: 5%; padding-right: 5%, but I'm not sure whether they behave constantly across browsers (more exactly, whether the table width remains constant, and the 5% are actually relative to the table).

In cases like this, I find it easier to use cells in between the content cells (containing only a  ) and give them a relative width. They make wonderfully for padding.

Answer 2

Unfortunately the CSS box model, which adds padding to the width or height of an element to determine size, causes % value width or height not to be useful on an element with padding.

However, if all you need is for the row to fill all available width, but you don't care about the width of individual columns, you can set just the width on the table, and just the padding on the cells:

table#foo { width: 100% }
table#foo td { padding: 5px 20px }