JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <th>Имя</th>
    <th>Телефон</th>
    <th>Оклад  222222 </th>
    <th>Код ИНН</th>
    <th>Адрес</th>
  </tr>
  <tr>
    <td>Иванов И.И.</td>
    <td><a href="tel:+380685553322">068-555-33-22</a></td>
    <td>540</td>
    <td>374537453745</td>
    <td>ул. Ленина, д. 66, кв. 6</td>
  </tr>
  <tr>
    <td>Петров П.П.</td>
    <td><a href="tel:+380685552233">068-555-22-33</a></td>
    <td>580</td>
    <td>374537453746</td>
    <td>ул. Сталина, д. 33, кв. 3</td>
  </tr>
  <tr>
    <td>Сидоров С.С.</td>
    <td><a href="tel:+380683335522">068-333-55-22</a></td>
    <td>460</td>
    <td>374537453747</td>
    <td>ул. Ленина, д. 11, кв. 1</td>
  </tr>

CSS

table { width:100%; border:1px solid silver; border-collapse: collapse;}
th, td { padding:4px 8px; border:1px solid silver;}
td:nth-child(3),
td:nth-child(4) { text-align: right;}

@media screen and (min-width:460px) and (max-width:640px) {
  tr > *:nth-child(4),
  tr > *:nth-child(5) { display:none;}
}
@media screen and (max-width:459px) {
  table { border-bottom:none;}
  table, tbody, tr, td { display:block;}
  thead, th, tr:first-child { display:none;}
  tr { border-bottom:1px solid silver;}
  td { border:none; text-align:left !important;}
  td:before { display:inline-block; width:100px; font-style:italic; color:#999;}
  td:nth-child(1) { padding-top:12px; font-weight:bold;}
  td:last-child { padding-bottom:12px;}
  td:nth-child(1):before { content:"Имя:"; font-weight:normal;}
  td:nth-child(2):before { content:"Телефон:";}
  td:nth-child(3):before { content:"Оклад:";}
  td:nth-child(4):before { content:"Код ИНН:";}
  td:nth-child(5):before { content:"Адрес:";}
}