JSFiddle - React, Tailwind, and code Playground

by yurikhan

HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th><span>one</span></th>
      <th></th>
      <th><span>many</span></th>
      <th></th>
      <th><span>unsure</span></th>
      <th></th>
      <th><span>many?</span></th>
      <th></th>
      <th><span>incomplete</span></th>
      <th></th>
      <th><span>none</span></th>
      <th></th>
      <th><span>∑</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>Matching</span></td>
      <td>517</td>
      <td></td>
      <td>62</td>
      <td></td>
      <td>368</td>
      <td></td>
      <td>626</td>
      <td></td>
      <td>104</td>
      <td></td>
      <td>1,534</td>
      <td></td>
      <td>3,211</td>
    </tr>
    <tr>
      <td><span>Source</span></td>
      <td>517</td>
      <td></td>
      <td>24</td>
      <td></td>
      <td>368</td>
      <td></td>
      <td>206</td>
      <td></td>
      <td>104</td>
      <td></td>
      <td>1,534</td>
      <td></td>
      <td>2,753</td>
    </tr>
    <tr>
      <td><span>Ads review+</span></td>
      <td>403</td>
      <td></td>
      <td>7</td>
      <td></td>
      <td>58</td>
      <td></td>
      <td>1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>469</td>
    </tr>
    <tr>
      <td><span>Ads review−</span></td>
      <td>16</td>
      <td></td>
      <td>19</td>
      <td></td>
      <td>146</td>
      <td></td>
      <td>287</td>
      <td></td>
      <td>16</td>
      <td></td>
      <td></td>
      <td></td>
      <td>484</td>
    </tr>
    <tr>
      <td><span>Ads review?</span></td>
      <td>98</td>
      <td></td>
      <td>36</td>
      <td></td>
      <td>164</td>
      <td></td>
      <td>338</td>
      <td></td>
      <td>88</td>
      <td></td>
      <td>1,534</td>
      <td></td>
      <td>2,258</td>
    </tr>
    <tr>
      <td><span>Review?</span></td>
      <td>517</td>
      <td></td>
      <td>62</td>
      <td></td>
      <td>368</td>
      <td></td>
      <td>626</td>
 ...

CSS

/* Базовая структура таблицы, шрифты */
table { font-size: 13px; width: 656px; }
th, td:first-child { font-size: 11px; }
thead :is(th, td) { height: 20px; }
tbody :is(th, td) { height: 32px; }
th { font-weight: normal; }
th, td { padding: 0; }

/* Зебра */
tr:nth-child(2n+1) td { background: rgba(0, 0, 0, 0.1); }

/* Границы клеток, чтоб видеть */
th, td { box-shadow: 0 0 0 1px #8c8 inset; }

/* Выравнивание содержимого клеток*/
td, th { display: flex; align-items: center; }
th { justify-content: center; }
td:not(:first-child) { justify-content: flex-end; }

/* Чёрная магия. Превращаем таблицу в грид. Колонки:
 * 1 — фиксированная 96px + 16px отступ слева
 * 2, 4, 6, 8, 10, 12, 14 — по самому широкому значению
 * 3, 5, 7, 9, 11, 13 — фейковые, по ним распределяем свободное место
 */
table {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: calc(16px + 96px) repeat(6, max-content 1fr) max-content;
}
/* для целей grid layout’а считать th и td непосредственно вложенными в table */
thead, tbody, tr { display: contents; }

/* Отступы слева и справа */
:is(th, td):first-child { padding-left: 16px; }
:is(th, td):last-child { padding-right: 16px; }


table { overflow-x: hidden; }
th { margin: 0 -88888px; }