Question

我有一个表格，显示一些信息，第一行是相应信息的标题。

在滚动时，让我们说从页面顶部100px，我希望标题行保持固定在可见屏幕的顶部，这样当你向下滚动表格时，你仍然可以看到标题。

我试过了：

$(window).scroll(function(){
    if( $(window).pageYOffset > 100 ){
        $("#resultTableHeader").css('position', 'fixed');
        $("#resultTableHeader").css('top', '70px');
        $("#resultTableHeader").css('z-index', '2');
    }
});

但它似乎没有做任何事情。

但是，即使它确实如此，也要使标题行固定，如果一列扩展了标题行列，那么将其拉出流将使该列不再展开。

有办法做到这一点吗？

编辑（更多信息）：

我可以保证整个页面只是表格，所以保持在屏幕顶部任何超过100px的Y合作都是可以接受的。当我说固定时，我的意思是当你沿着桌子向下滚动时，标题行将保持固定在VISIBLE窗口的顶部。

Answer 1

使用表格元素时，这是一个常见问题。大多数库使用两个表来解决这个问题。第一个表只包含第th个元素，第二个表包含所有tr元素。例如，检查jqgrid。

Answer 2

使用纯html和css修复表头

import React from 'react';
import {Button} from 'react-bootstrap';
let App=React.createClass({

    render: function () {
        return (
            <div>
            <Button bsStyle="primary" bsSize="large">Primary</Button>
            <Button bsStyle="success">Success</Button>
            <Button>Sketo</Button>
             </div>
        );
    }

});

React.render(<App />, document.getElementById('app'));

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

如何将其表现为固定的顶部栏？

2 个答案: