title: Fluid table with td nowrap & text-overflow?
body: <p>Here is my problem HTML:</p>
  
  <pre><code>&lt;table style="width:100%"&gt;
    &lt;tr&gt;
      &lt;td style="width:100%;overflow:hidden"&gt;
        &lt;div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"&gt;long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is what I wanted:</p>
  
  <pre><code>&lt;div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%"&gt;long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
  &lt;/div&gt;
  </code></pre>
  
  <p>That is:</p>
  
  <ol>
  <li>No horizontal scroll bars</li>
  <li><code>div</code> do not make the <code>table</code> and <code>td</code> so wide</li>
  <li>resizing browser window makes the <code>div</code> dynamic change of <code>ellipsis</code></li>
  </ol>
  
  <p>btw, anyway to minic <code>text-overflow</code> on Firefox?</p>