Question

How can I make a HTML two column table where the first column only takes the width it needs but the second fill up to the fixed total table width? So that changing the second column contents does not rebalance the space between the first and second column without assigning a fixed width to the first column.

Answer 1

You can use

td:first-child + td { width: 100%; }

in CSS. This works on modern browsers. Old versions of IE (up to IE 6) don’t understand the “advanced” selectors used here; for them, you could use

<col><col width="100%">

in HTML (it does no harm on modern browsers), after the <table> tag and before the table rows.

The concept “the width it needs” is somewhat ambiguous if a cell contains spaces or may otherwise be split on two or more lines. A cell with “foo bar” needs more space if “foo” and “bar” are to stay on the same line. By default, browsers may split them. You can prevent this in CSS by saying

td:first-child { white-space: nowrap; }