title: CSS percentage width and text-overflow in a table cell
body: <p>I have a table where the cells' width is in percentage and I want to use <code>text-overflow: ellipsis</code> to hide long lines of text:</p>
  
  <p><a href="http://jsfiddle.net/Fm5bM/">http://jsfiddle.net/Fm5bM/</a></p>
  
  <p>In the example the ellipsis works fine in a div but not in the cell. It still grows and ignores both <code>width:60%</code> and <code>max-width:60%</code>.</p>
  
  <p>If I add a <code>display:block</code> to the cell, the text does stop at 60% and gets the ellipsis, but the total width of the cell is still the size of the whole text.</p>
  
  <p><a href="http://jsfiddle.net/Fm5bM/3/">http://jsfiddle.net/Fm5bM/3/</a></p>
  
  <p>Ultimately, I want the table to fit the screen. Is there a way to do it with pure css?</p>