0

我只需要这张表在最新版本的谷歌浏览器中工作（所以不用担心跨浏览器的解决方案，比如旧版本的 IE 等）

我正在寻找一种解决方案来冻结第一行并且没有任何成功。relative如果我在这个 CSS 中排除这个词，position: fixed relative;那么标题行会堆叠在一起。当我滚动时，不确定如何让标题保持在屏幕顶部。

表格代码

<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>
4

2 回答 2

0

您可以为此定义一个 JScrollpane。

但是，如果用户不在 JScrollPane 的焦点范围内，它将无法工作。因此，如果用户在 JScrollPane 之外，您可以捕获 onscroll 事件并重置位置。

这是一个例子：

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

于 2013-04-05T10:00:41.877 回答
0

position: fixed relative是无效的 CSS。当您将某物设置为 时fixed，它的位置会“重置”，例如，对象不会停留在“它应该在的位置”，而是相对于文档，因此您需要使用 等设置它的top位置left。

这就是他们堆叠的原因。

阅读有关定位的更多信息。

于 2013-04-05T10:09:55.370 回答