php - 可滚动 40 行标题的带有 php 内容的粘性标题？

Question

我为我的粘性标题使用了固定位置，但它一直在外面，我正在使用 php 将数据拉入并打印出来。我的代码如下所示，我确实有 div，但是如果标题超过 15 个，标题就会一直在框外。有没有办法把它放在里面。

   <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

这是一个代码示例，其中包含直接来自数据库表的一系列行的 div 中。在 div 的顶部是一个固定的标题(不是下表的一部分)。 div 顶部的这个“标签”不会移动，并且行(如果有足够的行)在 div 中是可滚动的。您也许可以根据自己的情况进行调整。您必须将 anchor 类“rootabletitleanch”调整为一系列 div 或小型单行表。然后调整每一个的宽度以匹配下面的列。

我已经用我可以分享的特定代码更新了我的答案。它包含一个“粘性标题”——它来 self 的个人餐厅数据库。

这是您需要调整的 HTML header :

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

底部的 div 填充了来自 ajax 调用的列表:

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
  }