JSFiddle - React, Tailwind, and code Playground

by Kritika PATTALAM BHARATHKUMAR

HTML

<div id="table-wrapper">
  
    <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, 30</td> </tr>
<tr>...

CSS

#table-wrapper {

                height:150px;
                overflow:auto;  
                margin-top:20px;
                  }
          #table-wrapper table {
                 width:100%;
                 color:#000;    
                 }
          #table-wrapper table thead th .text {
                  position:fixed;   
                  top:0px;  
                  height:20px;
                  width:31.5%;
                  border:1px solid red;
               }