JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="tg-wrap">
  <div class="zui-scroller">
  <table class="tg">
  <thead>
  <tr>
    <th class="tg-kiyi sticky-col-1" rowspan="2">Title 1</th>
    <th class="tg-kiyi sticky-col-2" rowspan="2">Title 2</th>
    
    <th class="tg-kiyi cover-head-cell" colspan="3">Title 3</th>
    <th class="tg-kiyi" rowspan="2">Title 4</th>
    <th class="tg-kiyi cover-head-cell" colspan="3">Title 5</th>
    <th class="tg-kiyi" rowspan="2">Title 6</th>
    <th class="tg-kiyi cover-head-cell" colspan="3">Title 7</th>
    <th class="tg-kiyi" rowspan="2">Title 8</th>
  </tr>
  <tr>
  <th class="tg-kiyi sticky-col-1" rowspan="2">Subtitle 1</th>
    <th class="tg-kiyi sticky-col-2" rowspan="2">Subtitle 2</th>
    <th class="tg-29qf">Subtitle 3</th>
    <th class="tg-29qf">Subtitle 4</th>
    <th class="tg-29qf">Subtitle 5</th>
    <th class="tg-29qf">Subtitle 6</th>
    <th class="tg-29qf">Subtitle 7</th>
    <th class="tg-29qf">Subtitle 8</th>
    <th class="tg-29qf">Subtitle 9</th>
    <th class="tg-29qf">Subtitle 10</th>
    <th class="tg-29qf">Subtitle 11</th>
  </tr>
  </thead>
  <tr>
    <td class="tg-xldj sticky-col-1">sdz</td>
    <td class="tg-xldj sticky-col-2">saz</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">sa</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
  </tr>
  <tr>
    <td class="tg-xldj sticky-col-1">as</td>
    <td class="tg-xldj sticky-col-2">sa</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">sa</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
    <td class="tg-xldj">as</td>
   ...

CSS

.tg-wrap {
  position:fixed;
  top:0%;
  bottom:0%;
  left:0%;
  right: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.tg  {border-collapse:collapse;
  border-spacing:0;
  border-color:#ccc;
}

.tg td{
  font-family:Arial, sans-serif;
  font-size:14px;
  padding:9px 20px;
  border-style:solid;
  border-width:1px;
  overflow:hidden;
  word-break:normal;
  border-color:#ccc;
  color:#333;
  background-color:#fff;}

.tg th{
  font-family:Arial, sans-serif;
  font-size:14px;
  font-weight:normal;
  padding:9px 20px;
  border-style:solid;
  border-width:1px;
  overflow:hidden;
  word-break:normal;
  border-color:#ccc;
  color:#333;
  background-color:#f0f0f0;}

.tg .tg-29qf{
  font-weight:bold;
  background-color:#f0f0f0;
  border-color:inherit;
  text-align:left}

.tg .tg-xldj{
  border-color:inherit;
  text-align:left}

.tg .sticky-col-1{
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}

.tg .sticky-col-2{
    left: 160px;
    position: absolute;
    top: auto;
    width: 70px;
}

.zui-scroller {
    margin-left: 295px;
    overflow-x: scroll;
    padding-bottom: 5px;
    width: 900px;
}

.tg .tg-kiyi{
  font-weight:bold;
  border-color:inherit;
  text-align:left;
  min-width:100px;
}

.tg .cover-head-cell{
  min-width:300px;
  text-align:center;
}

.tg .tg-29qf{
  font-weight:bold;
  background-color:#f0f0f0;
  border-color:inherit;
  text-align:left;
  min-width:100px;
}

.tg .tg-xldj{
  border-color:inherit;
  text-align:left;
  min-width:100px;  
}

.tg .tg-dvid{
  font-weight:bold;
  background-color:#efefef;
  border-color:inherit;
  text-align:left;
  vertical-align:top;
  min-width:100px;
}

@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}