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, Dec 03 '13 at 21:56
`{$Row[UPDATE]}` should be `{$Row['UPDATE']}`, unless you actually HAVE `defined()`'d constants with those names — Marc B, Dec 03 '13 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, Dec 03 '13 at 22:02
Your 'no results' `div` is closed as an `h2`. Every result row is in it's own `tbody` — Adam Hopkinson, Dec 03 '13 at 22:03
possible duplicate of [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) — Arian Faurtosh, Dec 03 '13 at 22:03
@Arian, I've seen that post as well. It does not show a vertical scroll. — HoodCoderMan, Dec 03 '13 at 22:07
@JohnBeasley yes it does, look: http://jsfiddle.net/john_rock/h6hfX/1/ — Arian Faurtosh, Dec 03 '13 at 22:08
@JohnBeasley You might want to change the title of this question then.... lol — Arian Faurtosh, Dec 03 '13 at 22:11
@MarcB - You are wrong. You can't escape keys like that in an array. OP has the right syntax. — OptimusCrime, Dec 03 '13 at 23:00
@OptimusCrime: You're wrong. Using `{}` syntax in dobule-quoted strings requires quoting string-based array keys. http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.double (look for "Complex (curly) syntax") — Marc B, Dec 04 '13 at 14:21

score 1 · Answer 1 · answered Dec 03 '13 at 22:07

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>

PHP datatable with fixed headers and vertical scroll

1 Answers1