JSFiddle - React, Tailwind, and code Playground

HTML

<table class="donor" data-fix-rows="2" data-fix-cols="2">
    <tbody>
        <tr>
            <th colspan="2" rowspan="2">User</th>
            <th colspan="2">First</th>
            <th colspan="2">Second</th>
            <th colspan="2">Third</th>
        </tr>
        <tr>
            <th>A1</th>
            <th>B1</th>
            <th>A2</th>
            <th>B2</th>
            <th>A3</th>
            <th>B3</th>
        </tr>
        <tr>
            <td>000</td>
            <td>Suzy</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr><td>001</td>
            <td>Ashley</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</td>
            <td>Simona</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</td>
            <td>Nicky</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</td>
            <td>37 060 549,32</td>
            <td></td>
            <td></td>
            <td></td>
            <td>81 508 922,07</td>
            <td>585 794,76</td>
        </tr>
        <tr>
            <td colspan="2">Total Cost</td>
            <td>37 060 549,32</td>
            <td>585 794,76</td>
            <td>44 455 620,75</td>
            <td>127 248,00</td>
            <td>81 508 922,07</td>
            <td>585 794,76</td>
        </tr>
    </tbody>
    </table>
<div id="clone-head"></div>
<div id="clone-cols"></div>
<div id="clone-intersect"></div>

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;
}

JavaScript

$.fn.getNonColSpanIndex = function()
{
    if(! $(this).is('td') && ! $(this).is('th'))
    {
        return -1;
    }
    
    var allCells = this.parent('tr').children();
    var normalIndex = allCells.index(this);
    var nonColSpanIndex = 0;
    
    allCells.each(function(i, item)
                  {
                      if(i == normalIndex)
                          return false;
                      
                      var colspan = $(this).attr('colspan');
                      colspan = colspan ? parseInt(colspan) : 1;
                      nonColSpanIndex += colspan;
                  });
    
    return nonColSpanIndex;
};


var $donor = $('.donor');
var fix_rows = $donor.data('fix-rows');
var fix_cols = $donor.data('fix-cols');

fix_rows--;
fix_cols--;

/* clone head -- */
var clone_header = $donor.find('tbody').clone();
clone_header.find('tr:gt(' + fix_rows + ')').remove();

$('#clone-head').html('<table class="t-header">' + clone_header.html() + '</table>');
/* -- clone head */



/* clone cols -- */
var clone_cols = $donor.find('tbody').clone();
var isRowSpan = 0;
clone_cols.find('tr').each(function(i, element)
{
    $(element).find('th,td').each(function (index, el)
    {
        if (isRowSpan > 0)
        {
            $(el).remove();
        }
        if(el.rowSpan > 0)
        {
            isRowSpan = el.rowSpan;
        }
        if ($(el).getNonColSpanIndex() > fix_cols)
        {
            $(el).remove();
        }
    });
    
    if (isRowSpan > 0)
    {
        isRowSpan--;
    }
});

$('#clone-cols').html('<table class="t-cols">' + clone_cols.html() + '</table>');
/* -- clone cols */



/* clone intersect -- */
var clone_intersect = $('#clone-head').find('tbody').clone();
clone_intersect.find('th:gt(' + fix_rows + '),td:gt(' + fix_rows + ')').remove();

$('#clone-intersect').html('<table class="t-intersect">' + clone_intersect.html() + '</table>');
/* -- clone intersect */