JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
  <thead>
    <tr>
      <td>
        <strong>ID</strong>
      </td>
      <td>
        <strong>Adress</strong>
      </td>
      <td>
        <strong>Extra column</strong>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        A very, very long adress that cannot be showed entirely
      </td>
      <td>
        A very, very long adress that cannot be showed entirely
      </td>
    </tr>
  </tbody>
</table>

CSS

table{
  table-layout: fixed;
  margin-top: 24px;
  }

  th{
    white-space: normal;
    word-wrap: break-word;
  }

  td{
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
  }

  td:hover{
    overflow: visible;
    z-index: 2;
    background-color: grey;
    white-space: nowrap;
    table-layout:fixed;
    position:absolute;
    max-width:inherit;
  }