JSFiddle - React, Tailwind, and code Playground

HTML

<script>
window.onload = function()
{
    FixedMidashi.create();
};
</script>

<style type="text/css" media="screen">
  div.scroll_div { overflow: auto; }
</style>

<body onLoad="FixedMidashi.create();">
  <div class="scroll_div">
    <table _fixedhead="cols:2;" border="1">
      <thead>
        <tr>
          <th>&nbsp;</th><th nowrap="">NAME</th>
          <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
          <th>H</th><th>I</th><th>J</th><th>.</th><th>X</th><th>Y</th><th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="num">1</td><td>Name1</td>
          <td>A0001</td><td>B0001</td><td>C0001</td><td>D0001</td><td>E0001</td><td>F0001</td><td>G0001</td>
          <td>H0001</td><td>I0001</td><td>J0001</td><td> ... </td><td>X0001</td><td>Y0001</td><td>Z0001</td>
        </tr>
        <tr>
          <td class="num">2</td><td>Name2</td>
          <td>A0002</td><td>B0002</td><td>C0002</td><td>D0002</td><td>E0002</td><td>F0002</td><td>G0002</td>
          <td>H0002</td><td>I0002</td><td>J0002</td><td> ... </td><td>X0002</td><td>Y0002</td><td>Z0002</td>
        </tr>
        <tr>
          <td class="num">3</td><td>Name3</td>
          <td>A0003</td><td>B0003</td><td>C0003</td><td>D0003</td><td>E0003</td><td>F0003</td><td>G0003</td>
          <td>H0003</td><td>I0003</td><td>J0003</td><td> ... </td><td>X0003</td><td>Y0003</td><td>Z0003</td>
        </tr>
        <tr>
          <td class="num">4</td><td>Name4</td>
          <td>A0004</td><td>B0004</td><td>C0004</td><td>D0004</td><td>E0004</td><td>F0004</td><td>G0004</td>
          <td>H0004</td><td>I0004</td><td>J0004</td><td> ... </td><td>X0004</td><td>Y0004</td><td>Z0004</td>
        </tr>
        <tr>
          <td class="num">5</td><td>Name5</td>
          <td>A0005</td><td>B0005</td><td>C0005</td><td>D0005</td><td>E0005</td><td>F0005</td><td>G0005</td>
          <td>H0005</td><td>I0005</td><td>J0005</td><td> ......

CSS

.scroll_div {
  width: 300px;
  height: 160px;
}

JavaScript

var FixedMidashi = new function()
{

var DISABLED = false;

var ROWS = 1;
var COLS = 0;
var DIV_FULL_MODE = false;
var DIV_AUTO_SIZE = "both"; // both | width | height | none
var COPY_ID = true;
var BORDER_COLOR = null;
var BORDER_STYLE = null;
var BORDER_WIDTH = null;
var BOX_SHADOW = null;

var DIV_MIN_WIDTH = 150;
var DIV_MIN_HEIGHT = 150;

var DIV_BODY_SCROLL = 1;

var RADIO_PREFIX = "_FIXED_HEADER_";

var POS_FIXED    = 1;
var POS_ABSOLUTE = 2;
var POS_MIX      = 3;
var _positionMode = -1;

var j="textarea",i="password",h="checkbox",f="select-multiple",e="select-one",g="change",m="radio",l="INPUT",cc="fixed",bc="transparent",ac="0px",Zb="absolute",Yb="none",Xb="hidden",Wb="auto",Vb="",I="class",Ub="THEAD",Tb="scroll",n="resize",Sb=-1,Rb=null,Qb=true,Pb="both",Ob=false,Nb=this;

var TIMER_WATCH_TABLESIZE=3e3,TID_HEADER="H",TID_NUMBER="N",TID_CORNER="C",PX="px",HEIGHT_MARGIN=10,MIN_SIZE=1,_isIE=Ob,_IEver=0,_isIE11=Ob,_isFirefox=Ob,_isOpera=Ob,_isSafari=Ob,_isChrome=Ob,_isMobile=Ob,_isBackCompat=Ob,_fixedHeaders=Rb,_fixedList=Rb,_body=Rb,_resizeTimerId=Rb,_execFlag=Ob,_IE_retryCount=0;
Nb.create=function(){var f="_fixedhead";if(DISABLED)return Sb;if(!document.body.getBoundingClientRect)return -2;if(!window.addEventListener&&!window.attachEvent)return -3;var l=(new Date).getTime(),h=_fixedHeaders==Rb;if(!h)for(var b=0;b<_fixedHeaders.length;b++)_fixedHeaders[b].removeAllTables(Ob);for(var i=document.body.getElementsByTagName("TABLE"),e=[],b=0;b<i.length;b++){var c=i[b],d=c.getAttribute(f);if(d==Rb)d=c._fixedhead;if(d==undefined)continue;if(c.rows.length==0)continue;e.push(c)}if(e.length==0)return -4;var g=Rb;if(h){var a=navigator.userAgent.toLowerCase();_isIE=a.indexOf("msie")>=0;if(_isIE){var...