JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

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