How to minimize width of a table column (expand one column)?

Question

I have a simple two column table where the left shows line numbers and the right shows code. I want the left-side to be the smallest size without clipping, and the right side to fill the remaining area (the whole table should be a 100% width).

<table>
  <tr>
     <td><pre>line numbers</pre></td>
     <td><pre>code</pre></td>
  </tr>
</table>

The problem is that if the content on the right isn't large enough the extra space will also be balanced to the left (the line number column gets wider than it needs to be). How can I force all extra space to go into the right column?

Answer 1

Just set the second td in every row to be width: 100%; ... Table cells can't break to a new row if their width exceeds the container, so it will just force everything to fit as closely to your styles as it can. So, setting a 100% width on one column, and no setting on the other will make the cells in that column as wide as they can be.

See fiddle: http://jsfiddle.net/tvEY3/