Set position: sticky on table header with multiple rows

Question

I have a table header with 3 rows and I try to fix all those rows when I scroll down my table.

My problem is, only the last row of my header stay on top of the table when I scroll.

How can I set my position: sticky on the whole header ?

Here's my style and my HTML :

.table-responsive{
            height: 300px;
            overflow: scroll;
        }
        
        thead tr:nth-child(3) th {
            background: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        td{
          text-align: center;
        }

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>

  <div class="table-responsive">

    <table class="table table-bordered" style="border-width: 3px">

      <thead class="thead-light">

        <tr>

          <th></th>
                                                                                                                   <th colspan="3" style="font-size: 20px; text-align: center" class="align-middle">
                                                                                                                     CATEGORY 1
                                                                                                                   </th>
                                                                                                                   <th colspan="4" style="font-size: 20px; text-align: center" class="align-middle">
                                                                                                                     CATEGORY 2

            </th>

         </tr>
         
         <tr>

          <th></th>
                                                                                                                   <th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
                                                                                                                     Sub-Category 1.1
                                                                                                                   </th>
                                                                                                                   <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
                                                                                                                     Sub-Category 1.2

            </th>
            
            <th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
                                                                                                                     Sub-Category 2.1
                                                                                                                   </th>
                                                                                                                   <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
                                                                                                                     Sub-Category 2.2

            </th>
            
            <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
                                                                                                                     Sub-Category 2.3

            </th>

         </tr>
         
          <tr>

          <th> Group </th>
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                     Access 1
                                                                                                                   </th>
                                                                                                       
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                     Access 2
                                                                                                                   </th>
                                                                                                                   
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                    Access 3
                                                                                                                   </th>
                                                                                                                   
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                     Access 4
                                                                                                                   </th>
                                                                                                                   
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                     Access 5
                                                                                                                   </th>
                                                                                                                   
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                     Access 6
                                                                                                                   </th>
                                                                                                                   
                                                                                                                   <th style="font-size: 12px; text-align: center" class="align-middle">
                                                                                                                     Access 7
                                                                                                                   </th>
                                                                                      
                                                                                                     
         </tr>
         
      </thead>
      
      <tbody>
        
        <tr>
          
          <th>Group 1</th>
          
          <td>?</td>
          <td>?</td>
          <td>?</td>
          <td>Y</td>
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          
        </tr>
        
        <tr>
          
          <th>Group 2</th>
          
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          <td>N</td>
          
        </tr>
        
        <tr>
          
          <th>Group 3</th>
          
          <td>N</td>
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          <td>?</td>
          <td>?</td>
          
        </tr>
        
        <tr>
          
          <th>Group 4</th>
          
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          
        </tr>
        
        <tr>
          
          <th>Group 5</th>
          
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          <td>Y</td>
          <td>N</td>
          <td>N</td>
          
        </tr>
        
      </tbody>
      
    </table>
    
</div>
          
</body>

When I change the number of nth-child property in the stylesheet, it changes the row displayed. For exemple if I set it to 1, the first row of my header will be displayed. I also tried to remove this property, but all of my rows doesn't keep their height.

Thank you in advance for your help

Does this answer your question? [How to Fixed Header in html table with have multiple row header with rowspan and collspan](https://stackoverflow.com/questions/57708086/how-to-fixed-header-in-html-table-with-have-multiple-row-header-with-rowspan-and) — Awais, Nov 12 '20 at 10:15

score 0 · Answer 1 · answered Nov 12 '20 at 09:59

ıf you dont want the last row to stay on top you should get rid of "position:sticky" in replacement, you could put "position: abslute" or "position relative"

and also your html doesent seem right so i formetted and fixed your html for you.

your css has to look like this;

.table-responsive{
  height: 300px;
  overflow: scroll;
}

thead tr:nth-child(3) th {
  background: white;
  top: 0;
  z-index: 10;
}

td{
text-align: center;
}

this is your html that i fixed

<!DOCTYPE html>

<head>
  <html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>



  <body>

    <div class="table-responsive">

      <table class="table table-bordered" style="border-width: 3px">

        <thead class="thead-light">

          <tr>

            <th></th>
            <th colspan="3" style="font-size: 20px; text-align: center" class="align-middle">
              CATEGORY 1
            </th>
            <th colspan="4" style="font-size: 20px; text-align: center" class="align-middle">
              CATEGORY 2

            </th>

          </tr>

          <tr>

            <th></th>
            <th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
              Sub-Category 1.1
            </th>
            <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
              Sub-Category 1.2

            </th>

            <th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
              Sub-Category 2.1
            </th>
            <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
              Sub-Category 2.2

            </th>

            <th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
              Sub-Category 2.3

            </th>

          </tr>

          <tr>

            <th> Group </th>
            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 1
            </th>

            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 2
            </th>

            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 3
            </th>

            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 4
            </th>

            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 5
            </th>

            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 6
            </th>

            <th style="font-size: 12px; text-align: center" class="align-middle">
              Access 7
            </th>


          </tr>

        </thead>

        <tbody>

          <tr>

            <th>Group 1</th>

            <td>?</td>
            <td>?</td>
            <td>?</td>
            <td>Y</td>
            <td>N</td>
            <td>Y</td>
            <td>N</td>

          </tr>

          <tr>

            <th>Group 2</th>

            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>

          </tr>

          <tr>

            <th>Group 3</th>

            <td>N</td>
            <td>N</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td>?</td>
            <td>?</td>

          </tr>

          <tr>

            <th>Group 4</th>

            <td>N</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>

          </tr>

          <tr>

            <th>Group 5</th>

            <td>N</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>

          </tr>

        </tbody>

      </table>

    </div>

  </body>

</html>

Set position: sticky on table header with multiple rows

1 Answers1