title: Word-wrapping a long table cell while maintaining dynamic widths in others
body: <p>I have a table which has a long line in one of its cells. I need the long line to be split so that it doesn't cause the table to be more than 100% wide. I found that by adding <code>table-layout: fixed</code> and <code>word-wrap: word-break</code>, it will wrap the long cell. However, a side effect of using <code>table-layout</code> is that it causes all columns to have the same width.</p>
  
  <p>You can see an example of that here:</p>
  
  <p><a href="http://jsfiddle.net/RYdLd/2/" rel="nofollow">http://jsfiddle.net/RYdLd/2/</a></p>
  
  <p>How can I make the first column's width auto size to fit only its contents? (i.e.  In this example, it should be just wide enough to show the <code>1</code> and <code>2</code> in that column.)</p>
  
  <p>The data in the table will be loaded dynamically, so a solution which hard codes width values is not good because there's no way to know in advance how wide a column should be. My only option is to use a <code>&lt;table&gt;</code>, I can't use a <code>&lt;div&gt;</code> or some other element.</p>