PHP datatable with fixed headers and vertical scroll

Question

I have a PHP file that displays a grid table. I need to fix the headers, but still be able to scroll horizontally. I would like to do this with straight CSS and no Javascript.

I have searched all over Google and SO. Here are a couple of pages closest to what I would like to emulate, but they use Javascript:

http://fixedheadertable.com/

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

Take a look at my code. Perhaps my code could be changed or something:

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

The code directly above are the headers that I need to remain fixed, but they need to also scroll horizontally.

Here is the rest of the code for the actual data that is displayed in TD tags:

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

If I forgot to close a tag or add a semi-colon, please let it slide. Just know that this code works.

I just need to figure out how to fix the HEADERS and still be able to scroll them horizontally.

I know this can be done without javascript. I've tried several different CSS methods to make this work. I can get the header to stick, but it won't scroll horizontally.

I'm not really sure how to label the CSS so that it will display correctly. I've tried DISPLAY: BLOCK; TABLE-COLLAPSE: COLLAPSE; OVERFLOW: SCROLL; and many other methods.

I just can't get the header to stick.

Any help would be appreciated. Do I need to utilize DIVs within the table? I've seen and tried that as well. Perhaps the while loop in the middle of the table is throwing everything off.

The tags 'php' and 'mysql' have as much to do with this question as do 'electricity' and 'internet'. — Mark
– Mark, Commented Dec 3, 2013 at 21:56
{$Row[UPDATE]} should be {$Row['UPDATE']}, unless you actually HAVE defined()'d constants with those names — Marc B
– Marc B, Commented Dec 3, 2013 at 21:58
I have added a css tag. I didn't put a javascript tag because I want to do this without javascript. The HTML table is displayed via PHP and MYSQL, which is why I put those tags. Please accept my apologies for not putting the correct tags. — HoodCoderMan
– HoodCoderMan, Commented Dec 3, 2013 at 22:02
Your 'no results' div is closed as an h2. Every result row is in it's own tbody — Adam Hopkinson
– Adam Hopkinson, Commented Dec 3, 2013 at 22:03
possible duplicate of CSS-Only Scrollable Table with fixed headers — Arian Faurtosh
– Arian Faurtosh, Commented Dec 3, 2013 at 22:03

Francisco Presencia · Accepted Answer · 2013-12-03 22:07:13Z

1

Not an answer, but a recommendation (and cannot fit in a comment for obvious reasons). This looks much cleaner and is much easier to read. You normally want to keep your html and php as separated as possible:

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

Besides, what you had wasn't even valid php nor html. DON'T:echo "<thead><tr>" . echo "<th>Update</th>". DON'T: <div>Your search returned no results</h2>

answered Dec 3, 2013 at 22:07

Francisco Presencia

8,8757 gold badges50 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP datatable with fixed headers and vertical scroll

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related