JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <thead>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <th colspan="2">Заголовок</th>
         <td></td>
         <td></td>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </tfoot>
   <tbody>
      <tr> 
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
      </tr>
      <tr>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
      </tr>
      <tr>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
      </tr>
      <tr>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
      </tr>
   </tbody>
</table>

CSS

body {
    direction: rtl;    
}
table {
    empty-cells: show;
    border-collapse: collapse;
    width: 75%;
}
thead th {
    border: 2px solid #000;
}
thead td {
    border: 1px solid #ccc;
    height: 10px;
}
thead tr:first-child td {
    border-top: none;   
}
th {
    text-align: right;   
}
td {
    border: 1px solid #000;
}
tbody tr:first-child td {
    border-top-width: 2px;   
}
tr:before, tr:after {
    content: ' ';
    display: table-cell;
    width: 10px;
    border-bottom: 1px solid #ccc;
}
tbody tr:after {
    border-right: 2px solid #000;
}
tbody tr:before{
    border-left: 2px solid #000;
}
tfoot td {
    border: solid;
    border-width: 2px 1px 0;
    border-color: #000 #ccc;
    height: 10px; 
}
tfoot tr:before, tfoot tr:after {
    border: none;   
}