JSFiddle - React, Tailwind, and code Playground

Fixed Table Header Example.

by nilloc

HTML

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A Long Head</span></th>
                <th><span class="text">Short One</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
<tr> <td>1, 0j lkj dflkaj s;lkdfj;lksadj f;lkajs ;lkdf j;laskdj f;lkasjd fklsdj flksdj f;lkasj lfdkj sd;lkfj aslkdfj s</td> <td>2, 0dfdfsdfsdfsdfsd</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,...

CSS

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
  overflow:hidden;
}
#table-wrapper table tbody * {
  background:yellow;
  color:black;
}

#table-wrapper td{
  padding:4px;
}

#table-wrapper table thead{
  background-color:#ccc;
}

#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  white-space:nowrap;
  /* width:33.33%; */
  
  /* background-color:#ccc; */
  /* border:1px solid red; */
}