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

https://stackoverflow.com/questions/15830780

01-04-2022
|

문제

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>

해결책

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.