Sticky Header With Php Content For Scrollable 40 Lines Of Header?

I used position fixed for my sticky header but it kept coming outside, i am using php to pull the data in and print it out. My code is bellow, i do have divs but the header keeps g

Solution 1:

Here is an example of code where in a div that contains a series of rows direct from a db table. At the top of the div is a fixed header (NOT part of the table below). This 'label' at the top of the div does not move, and the rows (if there are enough of them) are scrollable in the div. You might be able to adapt this to your situation. You will have to adapt the anchor class 'rootabletitleanch' to a series of divs or a small single row table. And then adjust the width of each of those to match the columns below.

I've update my answer with a specific code I can share. It contains a 'sticky header' - it's from my personal restaurant database.

Here is the HTML header that you need to adjust:

<divclass='headerdiv'><tableclass='headertable'><tr><th>Hidden</th><th>Name</th><th>Type</th><th>County</th><th>City</th><th>Phone</th><th>Food</th><th>Amb</th><th>Svc</th><th>Cost</th></tr></table></div><divid='listdiv'class='listdiv'></div>

The div at the bottom is populated with the list from an ajax call:

functionfillrestaurantdiv(country2, foodtype2)
  {
   var result = '';  
   console.log(country2 + '-' + foodtype2);
   $.ajax({
           url: 'readrestaurantdatabackend.php',
          type: 'POST',
      dataType: 'JSON',
          data: {
                 country: country2,
                foodtype: foodtype2
                 }
          })
            .done(function(result){
                                   var output = "<table class='restauranttable'>";
                                   $.each(result, function(index, value)
                                                                        { output += "<tr><td id='uniqueid'>" + value.uniqueid +
                                                                                    "</td><td>" + value.restaurantname +
                                                                                    "</td><td>" + value.type +
                                                                                    "</td><td>" + value.country +
                                                                                    "</td><td>" + value.city +
                                                                                    "</td><td>" + value.phone +
                                                                                    "</td><td>" + value.scorefood +
                                                                                    "</td><td>" + value.scoreambience +
                                                                                    "</td><td>" + value.scoreservice +
                                                                                    "</td><td>" + '$' + value.scorecost +                                                                   
                                                                                    "</td></tr>";
                                                                         });
                                                                         output += "</table>";
                                                                         $("#listdiv").html(output);
                                   })
            .fail(function(jqXHR, textStatus, errorThrown){
                                                          $("#listdiv").html('Database not available');           
                                                           console.log(jqXHR.responseText, textStatus, errorThrown);
                                                           });//end ajax
  }