CSS for table: 1 fixed width column, 1 small column, remaining columns equal

Question

I'm trying to create a table whose first column is fixed width, whose second column contracts as small as it can to fit its text, and whose remaining columns split all remaining space equally, regardless of their contents. Here's a fiddle to demonstrate, my attempt so far: http://jsfiddle.net/B8LnP/ Two things to notice about the output: - I want the columns of the stacked tables to align, as if they were part of a single table - Notice the problem is that I can't get columns 3 and 4 to split up the remaining space. I've tried setting the width for the `.equal` class to both small and large values, but neither way accomplished the goal. Fiddle HTML ```

fixed

small_as_possible

split remaining

equally

…

fixed

small_as_possible

equally

Accepted Answer

This will do the work for you:

CSS:

```
table { width: 95%; margin: 0 auto; table-layout:fixed;}
td {border: 1px solid}
.fixed {width: 200px;}
.small {width: 120px;}
.equal {width: 50%;}
```

Demo: http://jsfiddle.net/B8LnP/1/

So What happens? Please note the `table-layout:fixed;`. With that and the `width` set on `table` (percentage of the containing element like in your case or a fixed amount), what happens is that first the fixed width columns are deducted from the table's width, and then the rest of the remaining width of the table is split among the remaining columns which have a percentage width or no width set at all (same as auto).

Also if all of the remaining columns (other than the ones with fixed width) have a percent width, but the total of the percentages doesn't add up to 100%, the remaining percents are automatically distributed among fixed width columns, so make sure the percentages add up to 100%.

CSS for table: 1 fixed width column, 1 small column, remaining columns equal

Solution

Problem