Question

I have an AJAX application which has used CSS divs to create panels on the screen, which are loaded separately and in succession, depending on what was loaded before it. The bottom ‘panel’ is a table showing a list or records from a database. At the top of the database is the name of the table, and I would like a way to have it be always above the list of records. I am unsure of how to do this, if it is with Javascript, or PHP, or css and html.

edit: I tried wrapping the table header in a div and setting the css for this purpose, but the table header does not seem to be in its own header and does not stay on screen separate from the records.

.tableheader {     position: absolute; } 

and

$table = 'AUCTIONS';  $rows = getRowsByArticleSearch($query, $table);  echo '<div id='tableheader' class='tableheader'>';  echo '<h1>{$query} Auctions</h1>' . '\n';  echo '</div>'; 

Have I missed something fundamental here?

Answer 1

I assume you mean to be able to scroll the table without moving the header?

I think your easiest option is the CSS overflow property.

<style type='text/css'>   div#dblist {     overflow: scroll;     height: 400px;   } </style>  <!-- ... -->  <div>Database Title</div> <div id='dblist'>   <table>     <!-- ... -->   </table> </div> 

---

@Joshxtothe4: It sounds like you’ve got scrolling set to the wrong element:

<div> <!-- sounds like you have it set here -->   <div><h1>Query Archive</h1></div>   <div> <!-- and want it set here -->     <table>       <!-- ... -->     </table>   </div> </div> 

You shouldn’t need absolute positioning for this.