title: Adding ellipsis to divs inside table columns
body: <p>In my code I'm trying to make the content of the <code>file-wrapper</code> div ellipsify so that the width of the table stretches 100% to screen width. </p>
  
  <p>I simply cannot figure out where I'm going wrong, as the <code>file-wrapper</code> div has a specified pixel width.</p>
  
  <p>EDIT: I've simplified the code down to the basics now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
   width: 100%; 
  }
  
  .file-wrapper {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="file-wrapper"&gt;
          testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>