JSFiddle - React, Tailwind, and code Playground

by Suhaib Janjua

HTML

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
<tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
<tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
<tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
<tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
<tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
<tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
<tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
<tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
<tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
<tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
<tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
<tr> <td>1, 11</td> <td>2, 11</td> <td>3, 11</td> </tr>
<tr> <td>1, 12</td> <td>2, 12</td> <td>3, 12</td> </tr>
<tr> <td>1, 13</td> <td>2, 13</td> <td>3, 13</td> </tr>
<tr> <td>1, 14</td> <td>2, 14</td> <td>3, 14</td> </tr>
<tr> <td>1, 15</td> <td>2, 15</td> <td>3, 15</td> </tr>
<tr> <td>1, 16</td> <td>2, 16</td> <td>3, 16</td> </tr>
<tr> <td>1, 17</td> <td>2, 17</td> <td>3, 17</td> </tr>
<tr> <td>1, 18</td> <td>2, 18</td> <td>3, 18</td> </tr>
<tr> <td>1, 19</td> <td>2, 19</td> <td>3, 19</td> </tr>
<tr> <td>1, 20</td> <td>2, 20</td> <td>3, 20</td> </tr>
<tr> <td>1, 21</td> <td>2, 21</td> <td>3, 21</td> </tr>
<tr> <td>1, 22</td> <td>2, 22</td> <td>3, 22</td> </tr>
<tr> <td>1, 23</td> <td>2, 23</td> <td>3, 23</td> </tr>
<tr> <td>1, 24</td> <td>2, 24</td> <td>3, 24</td> </tr>
<tr> <td>1, 25</td> <td>2, 25</td> <td>3, 25</td> </tr>
<tr> <td>1, 26</td> <td>2, 26</td> <td>3, 26</td> </tr>
<tr> <td>1, 27</td> <td>2, 27</td> <td>3, 27</td> </tr>
<tr> <td>1, 28</td> <td>2, 28</td> <td>3, 28</td> </tr>
<tr> <td>1, 29</td> <td>2, 29</td> <td>3, 29</td> </tr>
<tr> <td>1, 30</td> <td>2, 30</td> <td>3,...

CSS

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
    
}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}


table tr th {
  border: 1px solid #e0e0e0 !important;
  height: 48px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ababab !important;
  padding: 10px 20px !important;
}

table tr td {
  border: 1px solid #e0e0e0 !important;
  height: 34px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  padding: 10px 20px !important;
}