Question

我们制定了一个巧妙的技巧，使用以下方法在表上保留固定的标题：

$('#wrapper').on('scroll', function () {
    var translateY = 'translateY('+ this.scrollTop +'px)';

    $('thead th', this).css({
        '-webkit-transform': translateY,
        '-moz-transform': translateY,
        '-ms-transform': translateY,
        '-o-transform': translateY,
        'transform': translateY,
    });
});

您可以在此处查看工作示例： https://jsfiddle.net/n9j0q7wq/

当您滚动复选框时，我们唯一无法弄清楚的是在标题上显示。有人有人建议如何克服这个问题吗？

另外。我宁愿找到一种方法来实现它而不改变这些元素的位置css属性。

Answer 1

尝试添加z-index

.wrapper th {
  z-index: 10;
  position: relative;
  background-color: #50535a;
  border-left: 1px solid #bdbdbd;
  color: #ffffff;
  height: 30px;
  min-width: 85px;
}

小提琴：https://jsfiddle.net/n9j0q7wq/2/

带可滚动标题的表 - 使用转换/转换

1 个答案: