JSFiddle - React, Tailwind, and code Playground

by the wazz

HTML

<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
<tr>
<td>A</td>
<td>This is a long text!</td>
<td>short</td>
<td>12345678901234567890</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
<td>11111111111111111111</td>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>text!</td>
<td>09876543210987654321</td>
</tr>
</table>

CSS

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

table td, table th {
  border: 1px solid black;
  word-wrap: break-word;
  white-space: normal;
  /* min-width: 100px; */
  max-width: 300px;
}