JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<script src="https://rawgithub.com/bramstein/column-selector/master/lib/jquery.column.js"></script>
<div class="tableContainer">
<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{
    background-color:#eef;
}
td, th { border: 1px solid #aaa; padding: 8px; }
td, th { background:white; }

table { 
    -webkit-transform: translateZ(0); 
    transform:translateZ(0);
}
.tableContainer {
    
    background-color:red;
    height:300px;
    width:600px;
    overflow:scroll;
        margin-left:0px;
    margin-top:0px;
}
table{
    border-collapse: collapse;

}

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) + '"]'),
    scrollParent = '.tableContainer'; // Container to which detection is determined

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

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


function posIt($elem, pos) { // Changes the position of given element to given type
    $elem.data('origPosition', { // Saves original values in a data attribute for later
        oTop: $elem.position().top,
        oLeft: $elem.position().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: pos,
            top:...