JSFiddle - React, Tailwind, and code Playground

HTML

<table>
     <tr>
       <td>
         <div> 
           <span>
             this is a long sentence to test the text overflow
           </span>
         </div>
       </td>
       <td>
         <div> 
           <span>
             this is a long sentence to test the text overflow
           </span>
         </div>
       </td>
       <td>
         <div> 
           <span>
             this is a long sentence to test the text overflow
           </span>
         </div>
       </td>
     </tr>
     <tr>
       <td>
         <div> 
           <span>
             this is a long sentence to test the text overflow
           </span>
         </div>
       </td>
       <td>
         <div> 
           <span>
             this is a long sentence to test the text overflow
           </span>
         </div>
       </td>
       <td>
         <div> 
           <span>
             this is a long sentence to test the text overflow
           </span>
         </div>
       </td>
     </tr>

CSS

table {
 //width: 100px;
 width: 500px;
 table-layout: fixed;
}

td {
 border: 1px solid red;
 padding:10px;
}

span {
 width: 100%;
 display: inline-block;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}