Search code examples
csscss-positioncontainersfixed

Fixing a header position for table within container

Firstly, I know similar questions have been asked because I have searched through them for days but I have been unable to find a solution that works.

Also, any JQuery/Javascript I try and use simply doesn't affect the table at all for some reason.

Basically I have a table (with a lot of columns) and I want the header within the container but fixed so that if you scroll down within the container the header stays.

I have attempted adding in jQuery, putting the the column names in a different table from the rows, and doing a simple position:fixed and altering the CSS for top and left etc, unfortunately still no luck.

Currently, because im trying to keep this simple I am trying to stick with a CSS solution and my position:fixed is causing this error:

I've also tried meesing with z-index, but i'm not sure this is relevant to what im trying to achieve

But what it should look like (i've cut out the columns to the side but there are 20+) is this: except that it wont stay fixed within the borders

My Code:

CSS:

    table
{
    border: 0;
    padding: 0;
    margin: 0 0 20px 0;
    border-collapse: collapse;
}
th
{
    padding: 5px; 
    text-align: right;        
    font-weight:bold;
    line-height: 2em;
    color: #FFF;
    background-color: #555;


}
tbody td
{
    padding: 10px;
    line-height: 18px;
    border-top: 1px solid #E0E0E0;

}
tbody tr:nth-child(2n)
{
    background-color: #F7F7F7;
}
tbody tr:hover
{
    background-color: #EEEEEE;
}
td
{
    text-align: right;
}
td:first-child, th:first-child
{
    text-align: left;
}

.table-container
{
    height: 500px;
    width: 100%;
    overflow: auto;
    position:relative;
    }

and my PHP file:

    <div class="table-container">
<table>

      <thead>
      <tr>

      <th>Account Name</th>
      <th>Opportunity ID</th>
      <th>Opportunity Name</th>
      <th>Project Manager</th>
      <th>Close Date</th>
      <th>Deal Region</th>
      <th>Status</th>
      <th>Post Close Changes</th>
      <th>Product Name</th>
      <th>Model</th>
      <th>Racks</th>
      <th>Chassis</th>
      <th>Additional Info</th>
      <th>QA Review</th>
      <th>QA Required</th>
      <th>QA Pack Out Complete</th>
      <th>Material Complete</th>
      <th>Required Build Start</th>
      <th>Actual Start</th>
      <th>Finish Date</th>
      <th>Manufacturing Status</th>
      <th>Notes</th>
      <th>Start Date</th>
      <th>LFinish Date</th>
      <th>Power Down</th>
      <th>Ship Date</th>
      <th>Delivery Date</th>
      <th>Requested Delivery</th>
      <th>Altered Requested </th>
      <th>Crating Inspection</th>
      <th>Country Name</th>

      </tr>
</thead>


  <?php foreach ($return as $index => $row) : ?>

    <tbody>
     <tr>
     <td><?php echo $row['Account_Name']?></td>
     <td><?php echo $row['Opportunity_ID']?></td> 
     <td><?php echo $row['Opportunity_Name']?></td>
     <td><?php echo $row['Project_Manager']?></td>
     <td><?php echo $row['Close_Date']?></td>
     <td><?php echo $row['Deal_Region']?></td>
     <td><?php echo $row['Status']?></td> 
     <td><?php echo $row['Post_Close_Changes']?></td>
     <td><?php echo $row['Product_Name']?></td> 
     <td><?php echo $row['Model']?></td> 
     <td><?php echo $row['Racks']?></td>
     <td><?php echo $row['Chassis_Count']?></td>
     <td><?php echo $row['additional_info']?></td>
     <td><?php echo $row['QA_Review']?></td>
     <td><?php echo $row['QA_Required']?></td> 
     <td><?php echo $row['QA_Pack_Out_Complete']?></td>
     <td><?php echo $row['Material_Complete']?></td>
     <td><?php echo $row['Req_Build_Start']?></td> 
     <td><?php echo $row['Actual_Start']?></td>
     <td><?php echo $row['Finish_Date']?></td> 
     <td><?php echo $row['Manufacturing_Status']?></td>
     <td><?php echo $row['Notes']?></td>
     <td><?php echo $row['Start_Date']?></td>
     <td><?php echo $row['LFinish_Date']?></td>
     <td><?php echo $row['Power_Down']?></td>
     <td><?php echo $row['Ship_Date']?></td>
     <td><?php echo $row['Delivery_Date']?></td>
     <td><?php echo $row['Requested_Delivery']?></td> 
     <td><?php echo $row['Altered_Requested']?></td>
     <td><?php echo $row['Crating_Inspection']?></td>
     <td><?php echo $row['Country_Name']?></td>

     <td><a href="<?php printf('updateall.php', $row['Opportunity_ID']);?>">Edit</a></td>
     <td>
      <form action="index.php" method="GET">
              <input type="hidden" name="delete" value="yes" />
              <input type="hidden" name="id" value="<?php echo $row['Opportunity_ID'];?>" /> 
              <input type="submit" value="Delete" />
      </form></td>

    </tr>

 </tbody>
            <?php endforeach; ?>

</table>

</div>

I've been at this for days looking through all sorts of websites and examples, any help would be much appreciated!

Solution

  • As it turns out the reason my Jquery wasn't working was because I am using a virtual machine not connected to the internet and the src="http//.." hence failed. Downloaded the javascript and added it to the folder instead and my issue is now fixed!

    (Solution was indeed JQuery)