How to left-align all table cells but the last one?

Question

I have a table with 1 row and 5 columns. I have fixed the width of those 5 columns to certain known values (150px, 200px etc..). I have also set the left-margin for each one.

I want the table to widen and occupy the entire width of its parent. So, I set its width to 100%. When the table is wider than the combined width and margins of the 5 columns, it causes them to spread out across the table leaving gaps in between.

But, I want those 5 columns to stay on the left.

To achieve this, I added a 6th column and set its width to auto, hoping that it will properly push the first 5 to the left and occupy the remaining space. It works in Firefox and Chrome. But it doesn't work in IE. In IE, the 5 columns still space themselves evenly across the table.

I tried setting the width of the 6th column to 100% instead of auto. But the problem is, it is wiping out the left-margins of the 5 columns! Sort of like, the 100% column is pushing the 5 columns too much to the left that their margins have disappeared!

I want the padding, margin and width of the first 5 columns to be maintained, but pushed to the left, yet the table should expand as wide as its parent.

The table has a background image that needs to show up beyond the 5 columns.

Some might suggest that I move the background to the table's parent, but I can't - take my word for it :D

How can I get this to work in Firefox, Chrome and IE?

Thanks.

Here is the link : http://test.greedge.com/table/table.php. Try it in FF and IE

Answer 1

Edit: The solution is simple: Add a   to the one td in the table in the last column. The table cell of the inlying table is not rendered, because it contains nothing. Thus, the last cell also contains nothing, does not get rendered, and the other cells have to split the available space amongst them.

I don't know which browser is doing the right thing here, all IE's (including 8) don't render the column, all other browsers do.

Old answer:

Columns aren't supposed to have margins according to the CSS 2.1 spec:

margin-right, margin-left

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

You will need to use padding within the cells.

An auto column should work in any browser in the scenario you describe (just don't specify any width). Can you post an online example of a table that doesn't work?