JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>

  <head>

    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <title>QoR_results_summary</title>

    <style type="text/css">

    </style>
  </head>

  <body>
    <br>
    <br>

    <img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
    </br>
    </br>
    </br>
    </br>


    <div class="tscroll">
      <table id="myTable" class="table-fixed">
        <thead>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>


            <th class="bigcolspan" colspan="43">IMP</th>
          </tr>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="bigcolspan darkcyan" colspan="43">SYN</th>

          </tr>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DC</th>
            <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
             ...

CSS

body, html {
  height: 100%;
  overflow: hidden;
    }

#right {
  height: 100%;
    }

table, th, td {
border: 1px solid black;  // changing-colors
// word-wrap: break-word;

}

tr:first-child {
  font-weight: normal;
}

tr:nth-child(even) {background: #eef}  // changing-colors
tr:nth-child(odd) {background: #fee}   // changing-colors

* {
  box-sizing: border-box;
}



#myTable {
  border-collapse: separate;
  border: 1px solid #ddd;  // changing-colors
  width: 100%;
  margin-top: 18px;
  // Remove the // in front of the below two lines, to get fixed-width
  // table-layout: fixed;
  // word-wrap: break-word;
   font-size: 10.5px;
   font-family: arial;
     
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}


#myTable tr {
  border-bottom: 1px solid #ddd;  // changing-colors
}

#myTable tr:first-child:hover, #myTable tr:hover {
  #background-color: Greylight;    // changing-colors
}

#myTable tr:first-child {
  background-color: #FFFFFF;    // changing-colors
  font-weight: bold;
}

.table-fixed {
  width: 100%;
}

/*This will work on every browser*/
 .table-fixed thead  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0;
    z-index: 999;
    background-color: #ddd;
    color: black;
}

thead tr:nth-child(1) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(2) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 30px;
    z-index: 999;
    background-color: teal;
    color: black;
}
thead tr:nth-child(3) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 66px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(4) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 110px;
    z-index: 999;
    background-color: white;
    color: black;
}

.tscroll {
  width: 100%;
  height: 80%;
  overflow-x: scroll;
  overflow-y: scroll;
 ...

JavaScript

$(function() {
 
  // on init
  $('.hide-column').eq(0).trigger( "click" );
  
   // on click
  $('.hide-column').click(HideColumns);
  
  $('.bigcolspan').each(function(index) {
  	$(this).data('colspan', $(this).attr('colspan'));
  });
  
  function HideColumns() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    var colIndex = 0;
    var colSpan = 0;

    $cell.parent().children().each(function(index) {
      if ($(this).is($cell)) {
        colSpan = parseInt($cell.attr("colspan") || 1);
        return false;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col index
    for (var i = colIndex; i < (colIndex + colSpan); i++) {
      $table.find("tbody tr, thead :nth-child(4)")
        .children(":nth-child(" + (i + 1) + ")")
        .addClass('hide-col');
    };
    
    //adjust colspan of top rows
    $('.bigcolspan').each(function(index) {
    	$(this).attr('colspan', parseInt($(this).attr('colspan'))-colSpan);
    });
    
    //always show first header
    $table.find("thead :nth-child(1)").children().removeClass('hide-col');
    
    //hide clicked cell
    $cell.addClass('hide-col');

    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

    $('.bigcolspan').each(function(index) {
    	$(this).attr('colspan', $(this).data('colspan'));
    });
  })


  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})