title: th and td width not working
body: <p>I'm putting together a table where I want the first element of the row if the text is too long should be shortened. For that I use</p>
  
  <pre><code>#name{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
  }
  </code></pre>
  
  <p>I have this table and just want "me" you can use the abbreviation text should be very long</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>#name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width:100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th id="name" style="width:20%"&gt;Test name test name test name&lt;/th&gt;
        &lt;th id="number"&gt;547821365&lt;/th&gt;
        &lt;th id="address"&gt;test #10900&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this does not work, always the first element is enlarged depending on the text and interrupts my other columns.</p>