javascript - 用相对定位画固定表头和边上几列的js表格边框显示遇到一些问题

Question

接到一个需求，需要画一个又长又宽的表格，并且第一行和左三列要固定，其他内容可以滚动。现在我通过js的相对定位实现。实现思路大致是左右滚动多少左三列移动多少，上下滚动多少第一行移动多少。实现代码如下

        var a={left:0,top:0};
        var z_index=1,z_index_min=2,z_index_mid=3,z_index_max=4;
        $(".main").scroll(function(event) {
            if(this.scrollLeft!=a.left){
                console.log("左右滚动");
                // console.log(this.scrollLeft);
                $(".left").css({
                    position: 'relative',
                    left: this.scrollLeft+'px',
                    zIndex: z_index_mid
                });
                $(".left_top").css({
                    position: 'relative',
                    left: this.scrollLeft+'px',
                    zIndex: z_index_max
                });
                // z_index=z_index+
            }else if(this.scrollTop!=a.top){
                console.log("上下滚动");
                // console.log(this.scrollTop);
                $(".top").css({
                    position: 'relative',
                    top: this.scrollTop+'px',
                    zIndex: z_index_mid
                });
                $(".left_top").css({
                    position: 'relative',
                    top: this.scrollTop+'px',
                    zIndex: z_index_max
                });
            }
            // console.log(z_index);
            a.left = this.scrollLeft;
            a.top = this.scrollTop;
        });

现在左右+上下滚动实现了，但是遇到一个问题，当我左右滚动时左三列的边框会随着表格滚动而滚走，最后消失了。

左右滚动前，有边框

左右滚动时，边框跟着滚动

左右滚动较多后，边框消失了

上下滚动也有这种情况。
我想问问这是为什么，有什么解决方法吗？

Answer 1

设置没有边框的区域的visibility为visible试试