带高度的固定柱表

Question

我有一个表，其中前三列应该是固定的，其余列应该是可滚动的。 Fiddle code 的表实现。

我将它们设置为由position:absolute 修复的第一列，并在其余列中使用margin-left 滚动条。

.zui-table .zui-sticky-col {
    left: 73px;
    position: absolute;
    top: auto;
    width: 230px;
}
.zui-table .zui-sticky-col-2 { 
    position: absolute;
    width: 40px; left: 35px;
}
.zui-table .zui-sticky-col-1 {
    width: 35px; left: 0px;
    position: absolute;
}

但问题是，当我有很多记录时，我需要通过垂直滚动条来限制表格的高度。

所以，我将max-height 给了.zui-scroller，但固定列超出了那个高度。另一个问题是，非固定的列标题正在滚动，这应该是固定的。

由于这是一个现有的模块，它具有其他功能，我不能使用其他插件来实现这一点。

有人可以指出正确的方向吗？

Answer 1

.zui-wrapper {
    position: relative;
    width:30%;
    height: 200px;
    overflow-y: auto;
}

使用overflow-y: auto 属性为zui-wrapper 类添加一个固定高度。它应该按预期工作。

https://jsfiddle.net/Grishma/sgcuvdy2/4/