JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<table class="donor" data-fix-rows="2" data-fix-cols="2">
    <tbody>
        <tr>
            <th colspan="2" rowspan="2">User <sup>(clone-intersect, clone-head, clone-cols)</sup></th>
            <th colspan="2">First <sup>(clone-head)</sup></th>
            <th colspan="2">Second <sup>(clone-head)</sup></th>
            <th colspan="2">Third <sup>(clone-head)</sup></th>
        </tr>
        <tr>
            <th>A1 <sup>(clone-head)</sup></th>
            <th>B1 <sup>(clone-head)</sup></th>
            <th>A2 <sup>(clone-head)</sup></th>
            <th>B2 <sup>(clone-head)</sup></th>
            <th>A3 <sup>(clone-head)</sup></th>
            <th>B3 <sup>(clone-head)</sup></th>
        </tr>
        <tr>
            <td>000 <sup>(clone-cols)</sup></td>
            <td>Suzy <sup>(clone-cols)</sup></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr><td>001 <sup>(clone-cols)</sup></td>
            <td>Ashley <sup>(clone-cols)</sup></td>
            <td></td>
            <td>585 794,76</td>
            <td>711 436,05</td>
            <td>127 248,00</td>
            <td>1 289 982,81</td>
            <td></td>
        </tr>
        <tr><td>002 <sup>(clone-cols)</sup></td>
            <td>Simona <sup>(clone-cols)</sup></td>
            <td>489 826,30</td>
            <td></td>
            <td>591 025,64</td>
            <td></td>
            <td>1 080 851,94</td>
            <td></td>
        </tr>
        <tr><td>003 <sup>(clone-cols)</sup></td>
            <td>Nicky <sup>(clone-cols)</sup></td>
            <td>263 111,43</td>
            <td></td>
            <td>304 993,43</td>
            <td></td>
            <td>568 104,86</td>
            <td></td>
        </tr>
        
        <tr><td colspan="2">Total <sup>(clone-cols)</sup></td>
            <td>37 060 549,32</td>
            <td></td>
            <td></td>
            <td></td>
           ...

CSS

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 40px 0;
}
th,td {
    border: 1px #aaa solid;
    box-sizing: 
}
.t-header {
    background: #C9EAFA;
}
.t-cols {
    background: #FAE1C9;
}
.t-intersect {
    background: #DDFAC9;
}