CSS table width 100% and td overflow hidden with no td width

Question

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.

I can do it using fixed td sizes, but I need make them relative to content

This question was made 3 years ago here: CSS: 100% width table, with cells that have hidden overflow and irregular/minimal cell widths

There are no responses, I wonder if is possible now.

This is an example on jsFiddle: https://jsfiddle.net/gd1fogee/

This is a snippet:

table{
  width:100%;
}
td{
	/*max-width: 150px !important; */
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td>this is a very very long text to show what i want to achieve</td><td>two</td><td>three</td>
  </tr>
</table>
</div>

Thank you in advance for your help!

Answer 1

I do not know if this is what you want but here it is.

https://jsfiddle.net/Tanikimura/4vypvwcn/

Apply text-overflow to a p tag.

table{
  width:100%;
}
td {
	max-width: 150px !important; 
	
}
td p{
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
      padding: 3px 5px;
}

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>
  </tr>
</table>
</div>