JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <thead>
     <tr>
        <th>header 1</th>
        <th>header 234567895678657</th>
     </tr>     
   </thead>
   <tbody>
     <tr>
        <td class="first">
          <span class="ellipsis">
        data long long long long long long long long long long long long cell
        </span>
        </td>
        <td class="second">data 2</td>
     </tr>
     <tr>
        <td class="first">short</td>
        <td class="second">data 2</td>
     </tr>     
   </tbody>
</table>

CSS

table {
    font-size: 14px;
    width: 100%;
    border: 1px solid;
    border-collapse:collapse;
}

th {
  white-space: nowrap;
}

th, td {
    border: 1px solid black;
    word-break: break-all;
}

.first {
  width: 20%;
  padding-right: 20px;
}

.first .ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 90%;
  display:inline-block;
}