JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/bramstein/column-selector/master/lib/jquery.column.js"></script>
<table id="fixed_hdr2">
<thead>
<tr>
<th colspan="5" rowspan="2"></th>
<th colspan="31">december</th></tr>

<tr>


<th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th><th>we</th><th>tu</th><th>fr</th><th>sa</th><th>mon</th><th>th</th> 
</tr>	

<tr>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>02</th><th>03</th><th>04</th><th>05</th><th>06</th><th>07</th><th>09</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>30</th><th>31</th> 
</tr>	


</thead>
<tbody>
<tr>
	<td colspan="5">test</td>
	<td colspan='26'></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>First</td>

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>	

<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Another row</td>

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>	
<tr>
    
	<td colspan="5">another spanned row</td>
	<td colspan='26'></td>
</tr>
    <tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Another...

CSS

body { margin:0; padding:0; }
td, th {
    border: 1px solid #aaa;
    padding: 8px;
}
td, th {
    background:white;
}

JavaScript

var numDays = 31, // Days of the months in the table
    // Get all header cells
    $headerCells = $('thead tr th'),
    // Get all label cells
    $labelCells = $('tbody tr td:nth-child(-n + 5):not([colspan]), tbody tr [colspan="5"]'),
    // Get all body cells
    $bodyCells = $('tbody tr td:nth-child(n + 5), tbody tr [colspan="' + (numDays - 5) + '"]');

$bodyCells.each(function () { // Give each body cell `position:absolute`
    absoluteIt($(this));
});
$headerCells.each(function () { // Give each header cell `position:fixed`
    fixIt($(this));
    $(this).css('z-index', '2'); // When scrolled, place over the other table cells
});
$labelCells.each(function () { // Give each label cell `position:fixed`
    fixIt($(this));
    $(this).css('z-index', '1'); // When scrolled, place over tbody cells
});

$(window).scroll(function () { // Compensate for scrolling
    // Get scroll positions
    var sLeft = -$('body').scrollLeft(),
        sTop = -$('body').scrollTop();
    $headerCells.each(function () { // Only scroll horizontally
        $(this).css({
            'left': sLeft + $(this).data('origPosition').oLeft
        });
    });
    $labelCells.each(function () { // Only scroll vertically
        $(this).css({
            'top': sTop + $(this).data('origPosition').oTop
        });
    });
});


function fixIt($elem) { // Changes the given element into `position:fixed`
    $elem.data('origPosition', { // Saves original values in a data attribute for later
        oTop: $elem.offset().top,
        oLeft: $elem.offset().left,
        oWidth: $elem.width(),
        oHeight: $elem.height()
    });

    setTimeout(function () { // Necessary to force after the `.data`
        $elem.css({ // Fix the element and make sure it looks like it did before
            position: 'fixed',
            top: $elem.data('origPosition').oTop,
            left: $elem.data('origPosition').oLeft,
            width: $elem.data('origPosition').oWidth,
            height:...