title: Table cell with ellipsis malfunctioning
body: <p>I have a table that needs to stretch 100% of the page. The first column is set up with an ellipsis on the text content for when the browser is resized. It works, but there is a blank 200px block to the right of the table cell (the width is determined from my CSS width calc of 100% - 200px).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ff_table {
     width: 100%;
   }
   .ff_table_td1 {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: calc(100% - 200px);
   }
   .ff_table_td2,
   .ff_table_td3 {
     width: 100px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="ff_table" border="1"&gt;
    &lt;tr&gt;
      &lt;td class="ff_table_td1"&gt;thequickbrownfoxjumpsoverthelazydogtwice&lt;/td&gt;
      &lt;td class="ff_table_td2"&gt;thequickbrown&lt;/td&gt;
      &lt;td class="ff_table_td3"&gt;thequickbrown&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>