title: CSS table width 100% and td overflow hidden with no td width
body: <p>I have a table using a 100% area width, and it has some td with overflow hidden, what I need is make their texts ellipsis when text is too long.</p>
  
  <p>I can do it using fixed td sizes, but I need make them relative to content</p>
  
  <p>This question was made 3 years ago here: <a href="https://stackoverflow.com/questions/25018781/css-100-width-table-with-cells-that-have-hidden-overflow-and-irregular-minima">CSS: 100% width table, with cells that have hidden overflow and irregular/minimal cell widths</a></p>
  
  <p>There are no responses, I wonder if is possible now.</p>
  
  <p>This is an example on jsFiddle: <a href="https://jsfiddle.net/gd1fogee/" rel="nofollow noreferrer">https://jsfiddle.net/gd1fogee/</a></p>
  
  <p>This is a snippet:</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%;
  }
  td{
   /*max-width: 150px !important; */
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
        padding: 3px 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:400px;display:block;"&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;one&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;td&gt;three&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;this is a very very long text to show what i want to achieve&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;td&gt;three&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance for your help!</p>