Fixing a header position for table within container

StackOverflow https://stackoverflow.com/questions/22935202

Question

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!

Was it helpful?

Solution 3

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)

OTHER TIPS

What you could try is set a class for the row/column(s) your table is on and then try position: fixed.
I don't know if this works the same for PHP as it does with HTML.

The only way to do this is to use two separate tables.

<table id="tableHeader">
<colgroup>
    <col class="column1"></col>
    <col class="column2"></col>
    <col class="column3"></col>
    <col class="column4"></col>
    <col class="column5"></col>
</colgroup>
<thead>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
        <th>Header5</th>
    </tr>
    <thead>
    </table>
    <div id="tableBody-container">      
<table id="tableBody">
     <colgroup>
        <col class="column1"></col>
        <col class="column2"></col>
        <col class="column3"></col>
        <col class="column4"></col>
        <col class="column5"></col>
    </colgroup>
    <tbody>
        <tr>
            <td>Val1</td>
            <td>Val2</td>
            <td>Val3</td>
            <td>Val4</td>
            <td>Val5</td>
        </tr>
        <tr>
            <td>Val21</td>
            <td>Val22</td>
            <td>Val23</td>
            <td>Val24</td>
            <td>Val25</td>
        </tr>
        <tr>
            <td>Val31</td>
            <td>Val32</td>
            <td>Val33</td>
            <td>Val34</td>
            <td>Val35</td>
        </tr>
        <tr>
            <td>Val41</td>
            <td>Val42</td>
            <td>Val43</td>
            <td>Val44</td>
            <td>Val45</td>
        </tr>
    <tbody>
</table>
</div>

Then you will allow second table container to scroll. But you will need to apply same column width to both tables

#tableHeader {
    width: 100%;
}

#tableHeader th {
    text-align: left;
}

#tableBody-container {
    height: 50px;
    overflow: auto;
}

#tableBody {
    width: 100%;
}

.column1,
.column2,
.column3,
.column4,
.column5 {
    width: 20%
}

But there will be one more problem — the scroll of the body will make the body table width less than header table. So a little bit of javascript

var scrollWidth = $("#tableHeader").width() - $("#tableBody").width();
$("#tableHeader").css("padding-right", scrollWidth);

See also: http://jsfiddle.net/ZNP3q/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top