Complex table layout with fixed width and expanding columns

Question

I have a complex table layout (jsfiddle). This is a long report with many sections and each section has a table in it.

The first two columns of the tables should have a fixed width to make sure they align nicely.

The third column should grow to fit the text inside of it without wrapping (it's always a single word).

The last column should always fill the remaining space.

When I just specify the widths of the first two columns and give the last column 100% width, then the last column fills the available space (good) but the widths of the first two columns are ignored.

When I give the table table-layout: fixed;, then the width of the first two columns works but the last two columns occupy the same screen space since I can't give the third column a fixed width.

Is there a solution for this?

Note: The solution doesn't need to work on IE! FF 12+ and Chome 21+ is enough.

score 0 · Accepted Answer · edited Aug 30 '12 at 09:57

0

Specify a general table with (e.g. '100%'). Then you only need to specify the widths of the first two columns. Therefore the two others behave like desired.

Here is the fixed fiddle.

In a nutshell:

Remove td.type { width: 100%; }
Add width:0.1em; to td.name

edited Aug 30 '12 at 09:57

Aaron Digulla

321,842
108
597
820

answered Aug 30 '12 at 08:10

Francis

244
1
4
14

As you can see in the jsfiddle http://jsfiddle.net/RVSbJ/, I already did that and it doesn't work. – Aaron Digulla Aug 30 '12 at 08:24
Remove the `td.type { width: 100%; }`. – Francis Aug 30 '12 at 08:28
That works but it looks a bit ugly because the free space is now split between the last two columns. Is there a way to make only the last column grow? – Aaron Digulla Aug 30 '12 at 08:31
Not pretty, but adding `width:0;` to `td.name` solves this problem. – Francis Aug 30 '12 at 08:38
Nope, doesn't work for me. Can you please update the jsfiddle to show how it works? – Aaron Digulla Aug 30 '12 at 09:27
Sorry, you already wrote that on your question. Check out [this](http://jsfiddle.net/fant/mcZkD/7/) – Francis Aug 30 '12 at 09:44

Complex table layout with fixed width and expanding columns

1 Answers1