meuravinash
New Member
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 \[code\]relative\[/code\] in this CSS \[code\]position: fixed relative;\[/code\] 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\[code\]<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>\[/code\]