th and td width not working
<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>