title: CSS: Set a maximum width on a table
body: <p>I'm generating application logs in html, and I've stumbled across a rather annoying problem. I have the following layout :</p>
  
  <pre><code>| Action | Result | File path           |
  </code></pre>
  
  <p>For example</p>
  
  <pre><code>| Copy | Success | C:\VeryVeryVeryLongF |
  |      |         | ileName.txt          |
  </code></pre>
  
  <p>Columns 1 and 2 only display short labels : their contents should stay on one single line. On the other hand, column 3 may contain very long file paths, which should span multiple line if they can't fit on a single line.</p>
  
  <p>To achieve this, I've used <code>white-space: nowrap;</code> on the first columns, and <code>white-space: normal; word-break: break-all;</code> on the last. Also, the table has <code>width:100%</code>.</p>
  
  <p>This works great in Chrome and IE, but not in Firefox : <strong>In short, I can't seem to find a way to tell Firefox 8.0 to not enlarge the last column of the table, and instead let the text span multiple lines</strong>. In my previous example, Firefox prints </p>
  
  <pre><code>| Copy | Success | C:\VeryVeryVeryLongFileName.txt |
  </code></pre>
  
  <p>The text in the first two columns may vary, so I can't set their width manually and use <code>table-layout: fixed</code>. I've also tried setting <code>max-width</code> on the table, and wrapping it in a <code>div</code>, to no avail.</p>
  
  <p>See <a href="http://jsfiddle.net/GQsFx/6/" rel="nofollow noreferrer">http://jsfiddle.net/GQsFx/6/</a> for a real-life example =) How can I make Firefox behave like Chrome?</p>