Scrollable table with fixed header

Question

I searched for some solutions in PHP/HTML/CSS for this, but nothing worked so far, maybe because in most of those examples were sooo much of code so I got lost in it. Could

Answer 1

Table fixed header using CSS

The simplest would be to position: sticky; your th elements:

.tableFix { /* Scrollable parent element */
  position: relative;
  overflow: auto;
  height: 100px;
}

.tableFix table{
  width: 100%;
  border-collapse: collapse;
}

.tableFix th,
.tableFix td{
  padding: 8px;
  text-align: left;
}

.tableFix thead th {
  position: sticky;  /* Edge, Chrome, FF */
  top: 0px;
  background: #fff;  /* Some background is needed */
}

  

    

      
H1
Header 2
Header 3
4
5th Header
    
    

      
R1C2
R1C2
R1C3
R1C4
R1C5
      
R2C1
R2C2
R2C3
R2C4
R2C5
      
R3C1
R3C2
R3C3
R3C4
R3C5
      
R4C1
R4C2
R4C3
R4C4
R4C5
      
R5C1
R5C2
R5C3
R5C4
R5C5
      
R6C1
R6C2
R6C3
R6C4
R6C5
    
  

Table fixed header for older browsers

If the browsers you need to support do not encompass the position's sticky value, you can take a look at Fix table head using a bit of Javascript