Sticky header with php content for scrollable 40 lines of header?

Question

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 going outside the box if it is more than 15 for example. is there a way to keep it inside.

   <div class="scrollableContainer">
  <div class="scrollingArea">
<?php


if(!$link = mysql_connect("localhost", "root", "")) {
     echo "Cannot connect to db server";
}
elseif(!mysql_select_db("Disney")) {
     echo "Cannot select database";
}
else {
     if(!$rs = mysql_query("SELECT * FROM DisneyCharacters")) {
          echo "Cannot parse query";
     }
     elseif(mysql_num_rows($rs) == 0) {
          echo "No records found";
     }
     else {

//      Name, Movie, year, ShoeSize, FavoriteColor, FavoriteFood, PhoneNumber, CharacterType, FavoriteDrink, Address, FavortieTvShow, School, Age, HouseSqFoot, RelationShip, Rating, CarModel, CarYear, Boyfriend,
// NumberFriends, CriminalHistory, HappyEnding, FavoriteLocation, AppleDevice, WorkLocation, Weight, RepublicanDemocratic, DressColor, Shampoo, NumberKids) 

          echo "<div class='headerdiv'>";

                  echo "<div class='headertable'>";

          echo "<table  id=\"sortedtable\" class=\"draggable sortable\">\n";
          echo "<thead>\n<tr>";
          echo "<th>Name  </th>";
          echo "<th>Movie  </th>";
          echo "<th>Year  </th>";
          echo "<th>Shoe Size </th>";
          echo "<th>Favorite Color </th>";
          echo "<th>Favorite Food </th>";
          echo "<th>Phone Number </th>";
          echo "<th>Character Type </th>";
          echo "<th>Favorite Drink </th>";
          echo "<th>Address </th>";
          echo "<th>Favorite TvShow </th>";
          echo "<th>School </th>";
          echo "<th>Age </th>";
          echo "<th>HouseSqFoot </th>";
          echo "<th>Relationship </th>";
          echo "<th>Rating </th>";
          echo "<th>Car Model </th>";
          echo "<th>Car Year </th>";
          echo "<th>Boyfriend </th>";
          echo "<th>Number Friends </th>";
          echo "<th>Criminal History </th>";
          echo "<th>Happy Ending </th>";
          echo "<th>Favorite Location </th>";
          echo "<th>Apple Device </th>";
          echo "<th>Work Location </th>";
          echo "<th>Weight</th>";
          echo "<th>Republican Democratic </th>";
          echo "<th>Dress Color </th>";
          echo "<th>Shampoo </th>";
          echo "<th>Number Kids </th>";
echo "</tr>\n</thead>\n";


          echo " <tbody>";
          while($row = mysql_fetch_array($rs)) {


               echo "<tr>
                    <td>$row[Name]&nbsp</td>
                    <td>$row[Movie]&nbsp&nbsp</td>
                    <td>$row[Year]&nbsp</td>
                    <td>$row[ShoeSize]&nbsp</td>
                    <td>$row[FavoriteColor]&nbsp</td>
                    <td>$row[FavoriteFood]&nbsp</td>
                    <td>$row[PhoneNumber]&nbsp</td>
                    <td>$row[CharacterType]&nbsp</td>
                    <td>$row[FavoriteDrink]&nbsp</td>
                    <td>$row[Address]&nbsp</td>
                    <td>$row[FavoriteTvShow]&nbsp</td>
                    <td>$row[School]&nbsp</td>
                    <td>$row[Age]&nbsp</td>
                    <td>$row[HouseSqFoot]&nbsp</td>
                    <td>$row[RelationShip]&nbsp</td>
                    <td>$row[Rating]&nbsp</td>
                    <td>$row[CarModel]&nbsp</td>
                    <td>$row[CarYear]&nbsp</td>
                    <td>$row[Boyfriend]&nbsp</td>
                    <td>$row[NumberFriends]&nbsp</td>
                    <td>$row[CriminalHistory]&nbsp</td>
                    <td>$row[HappyEnding]&nbsp</td>
                    <td>$row[FavoriteLocation]&nbsp</td>
                    <td>$row[AppleDevice]&nbsp</td>
                    <td>$row[WorkLocation]&nbsp</td>
                    <td>$row[Weight]&nbsp</td>
                    <td>$row[RepublicanDemocratic]&nbsp</td>
                    <td>$row[DressColor]&nbsp</td>
                    <td>$row[Shampoo]&nbsp</td>
                    <td>$row[NumberKids]&nbsp</td>
                </tr>\n";



          }
           echo " </tbody>";
          echo "</table><br />\n";
          echo "</div>";
          echo "</div>";

     }

}

?>

Answer 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:

<div class='headerdiv'>
<table class='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>

<div id='listdiv' class='listdiv'></div>

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

function fillrestaurantdiv(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
  }