粘贴标题与php内容可滚动40行标题？ [英] Sticky header with php content for scrollable 40 lines of header?

问题描述

我使用位置固定为我的粘性标题，但它不断来到外面，我使用PHP来拉数据并打印出来。我的代码是下面，我有div，但头如果超过15例如超过了盒子。是有办法保存它的。

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

     }

}

？>

推荐答案

这里是一个代码的例子，其中一个div包含一系列直接从一个db表的行。在div的顶部是一个固定的标题这个div的顶部的'label'不会移动，并且行（如果有的话）可以在div中滚动，你可以根据你的情况调整它。将必须将锚类'rootabletitleanch'适配到一系列div或一个小单行表，然后调整每个的宽度以匹配以下列。

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.

这里是HTML需要调整的标头：

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>

底部的div由ajax调用的列表填充：

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
  }

这篇关于粘贴标题与php内容可滚动40行标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！