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

     }

}

＆GT;

Answer 1

以下是代码示例，其中div包含直接来自db表的一系列行。在div的顶部是一个固定的标题（不是下表的一部分）。这个标签＆＃39;在div的顶部不移动，并且行（如果有足够的行）可以在div中滚动。您可以根据自己的情况调整此选项。你将不得不调整主播类＆rootmenttitleanch＆＃39;到一系列div或小单行表。然后调整每个宽度以匹配下面的列。

我用我可以分享的特定代码更新了我的答案。它包含一个＆＃39;粘性标题＆＃39; - 它来自我的私人餐厅数据库。

以下是您需要调整的HTML标头：

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

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

1 个答案: