JSFiddle - React, Tailwind, and code Playground

by Carol McKay

HTML

<div class="container" id="main_btl_container" style="padding: 0px; border: 1px solid black; border-image: none; width: 500px; height: 360px; position: relative;">
   <table id="table-body" cellspacing="0" cellpadding="0">
      <tr class="vrow">
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
         <td>51098</td>
      </tr>
      <tr class="vrow">
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
         <td>51099</td>
      </tr>
      <tr class="vrow">
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
         <td>51100</td>
      </tr>
      <tr class="vrow">
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
         <td>51101</td>
      </tr>
      <tr class="vrow">
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
         <td>51102</td>
      </tr>
      <tr class="vrow">
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
         <td>51103</td>
        ...

CSS

table, th, td {
    border: 1px solid black;
    white-space:nowrap;
   /*  padding-left:5px; */
    table-layout:fixed;
    width: 100%;
    padding-right:5px;
}


.vrow td{
	width: 50px;
	line-height: 28px;
	white-space: nowrap;
	font-size: 15px;
	overflow: hidden;
	color:Black;
	/* display: inline-block; */
}
.fixed-header th{
	width: 50px;
}
div.main-table {
    overflow:auto;
    width:200px;
    height:300px;
    table-layout:fixed;
}
div.fixed-header-table {
    position:relative;
}

div.fixed-header-wrapper {
    overflow:hidden; 
    /* width: 999999999999999999px;  */
}

/* style for two seprate div */
#sidebar    {
    width: 50%;
    min-height: 400px;
    background: #EFF0F1;
    float: left;
}
#main{
    width: 500px;
    overflow: hidden;
}

#page-wrap  {
    width: 50%;
    background: #FFFFCC;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}
#outerDiv{
width: 500px;
overflow: hidden;
position: relative;
}
.container{
max-height: 300px;
overflow-y: auto;
}