CSS: Set a maximum width on a table

Question

I'm generating application logs in html, and I've stumbled across a rather annoying problem. I have the following layout :

| Action | Result | File path           |

For example

| Copy | Success | C:\VeryVeryVeryLongF |
|      |         | ileName.txt          |

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.

To achieve this, I've used white-space: nowrap; on the first columns, and white-space: normal; word-break: break-all; on the last. Also, the table has width:100%.

This works great in Chrome and IE, but not in Firefox : 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. In my previous example, Firefox prints

| Copy | Success | C:\VeryVeryVeryLongFileName.txt |

The text in the first two columns may vary, so I can't set their width manually and use table-layout: fixed. I've also tried setting max-width on the table, and wrapping it in a div, to no avail.

See http://jsfiddle.net/GQsFx/6/ for a real-life example =) How can I make Firefox behave like Chrome?

Answer 1

Will this work? This appears to work with the jsfiddle. Percentage based first two cols, then width auto the third, with table-layout: fixed on the table.

http://jsfiddle.net/keithwyland/uuF9k/1/

.actions {
  width:100%;
  table-layout: fixed;
}

.actions tr td {
  white-space: nowrap;
  width: 15%;
}

.actions tr td:nth-child(3) {
  white-space: normal;   
  word-break: break-all;
  word-wrap: break-word;
  width: auto;
}