How can I simply freeze the first row of my table using pure Javascript, no plugins?

Question

I only need this table to work in the latest version of Google Chrome (so no need to worry about cross-browser solutions, like older versions of IE, etc.)

I am looking for a solution to freeze the first row and not having any success. If I exclude the word relative in this CSS position: fixed relative; then the header rows stack on top of each other. Not sure how to get the header to stay at the top of the screen when I scroll.

Code for the Table

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $( "#status_report .measure[data-bg='1']").css('background', 'red');
    $( "#status_report .measure[data-bg='2']").css('background', 'grey');
    $( "#status_report .measure[data-bg='3']").css('background', 'yellow');
    $( "#status_report .measure[data-bg='4']").css('background', 'green');
});

</script>
<style type="text/css">
th{
    position: fixed relative;
    background:#111;
    color:#fff;
    padding: 2px;
}
td
{
    background:#ddd;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px;
}
</style>
</head>
<body>
<table id="status_report">
<tr>
    <th>field1</th>
    <th>field2</th>
    <th>field3</th>
</tr>
<tr>
<?php foreach( $data as $row ) : ?>
<tr>
    <td><?php echo $row['field1']; ?></td>
    <td class = "measure" data-bg="<?php echo $row['field2']; ?>"><?php echo $row['field2']; ?></td>    
    <td class = "measure" data-bg="<?php echo $row['field3']; ?>"><?php echo $row['field3']; ?></td>        
</tr>
<? endforeach;
$dbh = null; ?>
</table>
</body>
</html>

Duplicate of http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque I think. jQuery isn't what I thought you meant by "pure javascript no plugins" but you seem to be using it already. — drquicksilver, Apr 05 '13 at 09:53
@MMM by "freeze" I mean persist on the screen and not disapear from screen when I scroll the table — Ben, Apr 05 '13 at 10:01
@drquicksilver good point re: jquery, already not using a "pure" js solution. jquery solution would be fine. — Ben, Apr 05 '13 at 10:01
That's simply `position: fixed` :) You can't do `position: fixed relative`, what's that suppose to be? — MMM, Apr 05 '13 at 10:04
@MMM as you say, `position: fixed` causes them to stack so I will try to use absolute position along with the `fixed` attribute. Thanks! and `position: fixed relative` is garbage! haha just worked when I typed it in and wasn't sure why. Just learning here. Thanks for other link below too. Cheers — Ben, Apr 05 '13 at 10:25
"I will try to use absolute position along with the fixed attribute." - You can't use two values for `position`, that doesn't make any sense. It's like saying that something is both north and south :) — MMM, Apr 05 '13 at 10:34
@MMM makes sense. You can tell I'm a rookie! I just did as you suggested with two containers (and two separate tables) but now the columns don't line up right... — Ben, Apr 05 '13 at 10:54

score 0 · Answer 1 · answered Apr 05 '13 at 10:00

You could define a JScrollpane for that.

But if the user is out of the focus of the JScrollPane it will not work. So you could catch the onscroll event if the user is outside the JScrollPane and reset the position.

Here is an example of this:

http://christian-illies.info/2011/11/javascript-scrollbalken-mit-jscrollpane/

score 0 · Accepted Answer · answered Apr 05 '13 at 10:09

0

position: fixed relative is invalid CSS. When you set something to be fixed, its position "resets", as in, the object will not stay "where it's suppose to be" and will became relative to the document, so you need to set it's position using top, left etc.

That's why they stack.

How can I simply freeze the first row of my table using pure Javascript, no plugins?

Code for the Table

2 Answers2