JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<table class="mdc-data-table__table">
   <thead>
      <tr class="mdc-data-table__header-row">
         <th class="mdc-data-table__header-cell" rowspan="2" colspan="1">№</th>
         <th class="mdc-data-table__header-cell" rowspan="2" colspan="1">Серийный номер счетчика</th>
         <th class="mdc-data-table__header-cell" rowspan="2" colspan="1">Адрес</th>
         <th class="mdc-data-table__header-cell" rowspan="2" colspan="1">Дата и время инсталляции</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="4">Март</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="4">Апрель</th>
         <th class="mdc-data-table__header-cell" rowspan="2" colspan="1">Итого за период</th>
      </tr>
      <tr class="mdc-data-table__header-row">
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">01.03.21</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">02.03.21</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">03.03.21</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">Итого</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">01.04.21</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">02.04.21</th>
         <th class="mdc-data-table__header-cell" rowspan="1" colspan="1">03.04.21</th>
         <th class="mdc-data-table__header-cell" owspan="1" colspan="1">Итого</th>
      </tr>
   </thead>
   <tbody class="mdc-data-table__content">
      <tr class="mdc-data-table__row">
         <td class="mdc-data-table__cell" rowspan="1" colspan="1">123</td>
         <td class="mdc-data-table__cell" rowspan="1" colspan="1">345</td>
      </tr>
   </tbody>
</table>

CSS

th {
    border: 1px solid green;
}