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.

Answer 1

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