JSFiddle - React, Tailwind, and code Playground

by webwarrior

HTML

<br><br><br><br>
<table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base1">
      <tr bgcolor='gray'>
        <td>
          <br><br><br>
          need the blue column heading rows to remain fixed, and scroll the green rows:<br>

    <table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base2">
      <thead>

        <tr>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
          <th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
          <th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 3</th>
          <th width="150px" style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 4<br>more<br>more</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 5</th>
        </tr>
        <tr>
            <th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-b</th>
            <th...

CSS

.tableheader {
    position: fixed;
    height: 80px;
    top: 160px;
    left: 2.5%;
    z-index: 1000;    
}

JavaScript

jQuery(document).ready(function () {
    jQuery("body").append("<table class='tableheader' align='center' border='1' width='625' cellspacing='0' cellpadding='0'></table>");
    jQuery(".tableheader").append(jQuery(".base2 thead").clone());
    
    var headerToMove = jQuery(".tableheader");
    var headerOffsetTop = headerToMove.offset().top;
    var headerPosition = headerToMove.position();
    
    jQuery(window).scroll(function () { scroll_post_header(); });
    
    function scroll_post_header() {
        var new_position = headerOffsetTop - jQuery(window).scrollTop();
        if (new_position < 0) { new_position = 0;}
        if (headerPosition.top != new_position) {
            headerToMove.css("top",new_position);
            //headerToMove.stop().animate({ 'top': new_position }, 300);
        }
        if (jQuery(window).scrollTop() < 15) { headerToMove.css("top",headerOffsetTop);}
    }
});