JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
    <th>Col5</th>
    <th>Col6</th>
  </tr>
  <tr>
    <td>A</td>
    <td class="short">This is a long text!</td>
    <td class="long1">short</td>
    <td class="long2">This is an even longer text!</td>
    <td>12345678901234567890</td>
    <td>12</td>
  </tr>
  <tr>
    <td>short</td>
    <td class="short">short</td>
    <td class="long1">longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
    <td class="long2">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long</td>
    <td>11111111111111111111</td>
    <td>345</td>
  </tr>
  <tr>
    <td>This</td>
    <td class="short">is</td>
    <td class="long1">text!</td>
    <td class="long2">Something something something!!!</td>
    <td>09876543210987654321</td>
    <td>0</td>
  </tr>
</table>

CSS

table {
  border: 1px solid black;
  border-collapse: collapse;
  background-color: white;
}

table th {
  border: 1px solid black;
  word-wrap: break-word;
  text-align: center;
}

table td {
  border: 1px solid black;
  word-wrap: break-word;
  max-width: 300px;
  white-space: normal;
  vertical-align: top;
  text-align: left;
}

table td.short {
  white-space: nowrap;
}

table td.long1 {
  min-width: 300px;
}

table td.long2 {
  min-width: 500px;
  max-width: 500px;
}