Html 具有可滚动标题的表格-使用转换/翻译

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

$('#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,
    });
});

您可以在此处看到工作示例：

当你在标题上滚动复选框时，我们唯一无法理解的是。有没有人建议如何克服这一问题

还有。我宁愿找到一种方法，在不改变这些元素的position-css属性的情况下实现它。

尝试添加z-index

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

---

FIDLE:

唯一的问题是复选框不再可点击。这是一个想法，但问题是列内容的自动宽度将失败：这与

z-index

无关，对于自动宽度，您需要添加

空白：nowrap打开
td
。检查小提琴：