[FIXED] How can I create a fixed table header

Issue

I have a table that is auto generated using php and pear html_table. The table has a th row across the top and they have a class of assetHeader. The table also has a th column down the left side with a class of timeHeaders. The table consists of 96 rows by an indeterminate number of columns. I am attempting to fix the top header columns and allow the user to scroll the table (this was they always see the header the cells belong to). I have tried the normal css tricks to fix the table headers in place like this:

.main .assetHeader
{
    /********************/
    position:fixed;
    display:inline-block;
    /*********************/
}

When I do this, the result is that all the headers are stacked on top of each other and only the last one is fixed to the left side of the table (and it is smaller than the actual column width). I then attempted a little jquery to add a class to the parent table row, like this:

 $('.assetHeader').parent('tr').addClass('headerRow');

The corresponding css is similar to the above, and this works but with improper formatting of the th cells (they are all displayed and fixed into place, but are all small and no longer line up with the columns they belong to). I have been working here and there on this feature for a couple of weeks now. I have tried many different approaches and have only included the two that seem most viable. Plus I cannot remember everything I've tried that has failed. Any and all help would be greatly appreciated!

Solution

Okay, it took a little time to get this right, but I believe the solution is solid. In any case, my testing hasn't broken anything. I ended up having to wrap my headers in nested div's and then fix the div in place and format with css. Here is the beginning of my table code.

echo "<div class='tableContainer'><div class='innerContainer'><form id='calendarForm' action='schedule.php' method='POST'>";
echo "<table border='0' width='100%'class='calendarTable'>";
echo "<tr><td width='1%'><img id='leftArrow' src='../images/buttons/arrow_left.ico'/></td><td width='2%'><input type='text' id='calDate' size='9' name='calDate'/></td><td width='1%'><img id='rightArrow' src='../images/buttons/arrow_right.ico'/></td>";
echo "<td align='center'><select name='deptSelect' class='deptSelect'><h1>" ?><?php
                        fill_dropdowns('DepartmentID','DepartmentName','Departments','x','DepartmentID',$dept);
                        ?><?php echo "</select></h1></td>";
echo "<td><input type='hidden' id='roleID' value='$role'/></td>";
echo "<td align='right'></td><td><input type='hidden' id='picked' value='".$pickedDate."'/></td></tr>";
echo "</table></form></div>";

Then the tables are populated using php pear, and finally displayed like this:

    echo "<div id='head_container'>";
    echo $head->display();
    echo "</div>";
    echo $table->display();

and the css use to do the heavy work:

.tableContainer
{
    position:absolute;
    width:100%;
    margin-top:20px;
    margin-left:-4px;

}
.innerContainer
{
    position:fixed;
    padding-top:5px;
    height:45px;
    width:100%;
    margin-top:-50px;
    background-color:#FFF;
}
#head_container
{
    position:fixed;
    width:100%;
    height:35px;
}

Maybe not the most elegant approach, but it does the job for now.

Answered By - royjm

Answer Checked By - Katrina (PHPFixing Volunteer)