具有固定标题和垂直滚动的PHP数据表

时间:2013-12-03 21:53:38

标签: html css html-table

我有一个显示网格表的PHP文件。我需要修复标题,但仍然可以水平滚动。我想用直接的CSS和没有Javascript来做到这一点。

我搜遍了谷歌和所有。这里有几页最接近我想要模仿的页面,但它们使用Javascript:

http://fixedheadertable.com/

http://handsontable.com/demo/fixed.html

看看我的代码。也许我的代码可以改变或者其他东西:

 <?php 
   $select = "SELECT * FROM `dispatch`";
   $query = @mysql_query($select) or die ();
   $resnum = mysql_num_rows($query);

   if($resnum == 0){
     echo "<div>Your search returned no results</div>";
   }
   else{
     echo "<table>\n";
     echo "<thead><tr>" .
     echo "<th>Update</th>" .
     echo "<th>BOL</th>" .
     echo "<td>Container</th>" .
     echo "<td>Status</th>" .
     *** there are like 15 more <th> headers ***
     echo "</tr></thead>\n";

上面的代码是我需要保持固定的标题,但它们也需要水平滚动。

以下是TD标签中显示的实际数据的其余代码:

  while(($Row = mysql_fetch_assoc($query)) !== FALSE){
     echo "<tbody><tr>";
     echo "<td>{$Row[UPDATE]}</td>";
     echo "<td>{$Row[BOL]}</td>";
     echo "<td>{$Row[CONTAINER]}</td>";
     echo "<td>{$Row[STATUS]}</td>";
     *** again, there are like 15 more TD tags that showdata retrieved from query ***
     echo "</tr></tbody>\n";
  };
  echo "</table>\n";
 }
 ?>

如果我忘记关闭标签或添加分号,请让它滑动。只要知道这段代码有效。

我只需要弄清楚如何修复HEADERS并仍然可以水平滚动它们。

我知道这可以在没有javascript的情况下完成。我已经尝试了几种不同的CSS方法来完成这项工作。我可以让标题粘住,但它不会水平滚动。

我不确定如何标记CSS以便正确显示。我尝试了DISPLAY: BLOCK; TABLE-COLLAPSE: COLLAPSE; OVERFLOW: SCROLL;和许多其他方法。

我无法抓住标题。

任何帮助将不胜感激。我是否需要在表格中使用DIV?我也看过并试过了。也许桌子中间的while循环会把一切都扔掉。

1 个答案:

答案 0 :(得分:1)

不是答案,而是建议(由于显而易见的原因,不能适合评论)。这看起来更干净,更容易阅读。您通常希望将html和php尽可能分开:

 <?php 
   $select = "SELECT * FROM `dispatch`";
   $query = @mysql_query($select) or die ();
   $resnum = mysql_num_rows($query);

   if($resnum == 0){
     echo "<h2>Your search returned no results</h2>";
   }
   else{
     ?>
     <table>
     <thead><tr>
     <th>Update</th>
     <th>BOL</th>
     <td>Container</th>
     <td>Status</th>

     </tr></thead>

     <?php
     }
     ?>

此外,你所拥有的甚至不是有效的PHP或HTML。请勿:echo "<thead><tr>" . echo "<th>Update</th>"。请勿:<div>Your search returned no results</h2>