JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>1234 5678 456</td>
    <td>
dlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyText
    </td>
    <td>
dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text
    </td>
  </tr>
  <tr>
    <td>1234</td>
    <td>
    dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text dlouhy text
    </td>
    <td>
neco normalniho
    </td>
  </tr>
  <tr>
    <td>1234</td>
    <td>
    neco normalniho
    </td>
    <td>
dlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyTextdlouhyText
    </td>
  </tr>
</table>

CSS

@supports (display: grid) {
  table {
    display: block;
  }
  tbody {
    display: grid;
    grid-template-columns: auto minmax(150px, 2fr) minmax(100px, 1fr);
  }
  tr {
    display: contents;
  }
  td {
    border: 1px solid black;
    padding: 5px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}