JSFiddle - React, Tailwind, and code Playground

by yurikhan

HTML

<table>
<thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>
      <div>Into one</div>
      <div>None</div>
    </th>
    <th>Schedule</th>
    <th>Method</th>
    <th>Parsed</th>
    <th>Branches</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>11</td>
    <td>
      <div>220 Вольт, сеть магазинов инструментов</div>
      <div>220-volt</div>
    </td>
    <td>
      <div>21K of 32K</div>
      <div>44K of 51K</div>
    </td>
    <td>17:00</td>
    <td>Auto</td>
    <td>Mar 27 12:48</td>
    <td>221</td>
  </tr>
  <tr>
    <td>55</td>
    <td>
      <div>Аптека.ру, сервис заказа лекарств</div>
      <div>apteka.ru</div>
    </td>
    <td>
      <div>21K of 32K</div>
      <div>44K of 51K</div>
    </td>
    <td>17:00</td>
    <td>Auto</td>
    <td>Sep 07 01:32</td>
    <td>4K</td>
  </tr>
  <tr>
    <td>67</td>
    <td>
      <div>Аптеки низких цен Вита</div>
      <div>vita-nizkih-tsen</div>
    </td>
    <td>
      <div>21K of 32K</div>
      <div>44K of 51K</div>
    </td>
    <td>17:00</td>
    <td>Auto</td>
    <td>Sep 07 01:32</td>
    <td>4K</td>
  </tr>
  <tr>
    <td>11</td>
    <td>
      <div>220 Вольт, сеть магазинов инструментов</div>
      <div>220-volt</div>
    </td>
    <td>
      <div>21K of 32K</div>
      <div>44K of 51K</div>
    </td>
    <td>17:00</td>
    <td>Auto</td>
    <td>Mar 27 12:48</td>
    <td>221</td>
  </tr>
  <tr>
    <td>55</td>
    <td>
      <div>Аптека.ру, сервис заказа лекарств</div>
      <div>apteka.ru</div>
    </td>
    <td>
      <div>21K of 32K</div>
      <div>44K of 51K</div>
    </td>
    <td>17:00</td>
    <td>Auto</td>
    <td>Sep 07 01:32</td>
    <td>4K</td>
  </tr>
  <tr>
    <td>67</td>
    <td>
      <div>Аптеки низких цен Вита</div>
      <div>vita-nizkih-tsen</div>
    </td>
    <td>
      <div>21K of 32K</div>
      <div>44K of 51K</div>
    </td>
    <td>17:00</td>
    <td>Auto</td>
    <td>Sep 07 01:32</td>
    <td>4K</td>
  </tr>
  <tr>
    <td>11</td>
    <td>
      <div>220 Вольт, сеть магазинов...

CSS

table {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: max-content 10px 1fr 10px repeat(4, max-content 10px) max-content;
  position: relative;
}
thead, tbody, tr {
  display: contents;
}
th { position: sticky; top: 0; background: #eee; }
th { text-align: left; }
:is(th, td):nth-child(1) { grid-column: 1; }
:is(th, td):nth-child(2) { grid-column: 3; }
:is(th, td):nth-child(3) { grid-column: 5; }
:is(th, td):nth-child(4) { grid-column: 7; }
:is(th, td):nth-child(5) { grid-column: 9; }
:is(th, td):nth-child(6) { grid-column: 11; }
:is(th, td):nth-child(7) { grid-column: 13; }