TH Freeze table

by anoopsuda

HTML

<div class="fixTableHead"> 
    <table> 
      <thead> 
        <tr> 
          <th>Col 1</th> 
          <th>Col 2</th> 
        </tr> 
      </thead> 
  
      <tbody> 
        <tr> 
          <td>1.1</td> 
          <td>2.1</td> 
        </tr> 
        <tr> 
          <td>1.2</td> 
          <td>2.2</td> 
        </tr> 
        <tr> 
          <td>1.3</td> 
          <td>2.3</td> 
        </tr> 
        <tr> 
          <td>1.4</td> 
          <td>2.4</td> 
        </tr> 
        <tr> 
          <td>1.5</td> 
          <td>2.5</td> 
        </tr> 
      </tbody> 
        
    </table>

CSS

.fixTableHead { 
      overflow-y: auto; 
      height: 110px; 
    } 
    .fixTableHead thead th { 
      position: sticky; 
      top: 0; 
    } 
    table { 
      border-collapse: collapse;         
      width: 100%; 
    } 
    th, 
    td { 
      padding: 8px 15px; 
      border: 2px solid #529432; 
    } 
    th { 
      background: #ABDD93; 
    }