冻结angularjs表上的标题和列问题

Question

我正在开发Spring项目，它有很多表来显示数据。我们创建了angularjs表。我们必须冻结前一个/两个列和前两行表来正确显示数据，因为表有大量数据。

要冻结css后面的行和列：

CSS更改

spaces = Space.objects.filter(carpark=OuterRef('pk')).order_by().values('carpark')
count_spaces = spaces.annotate(c=Count('*')).values('c')
Carpark.objects.annotate(space_count=Subquery(count_spaces))

要冻结列，这些脚本已应用于控制器的文档中：

列冻结

.table1 {
  position: relative;
  width: 1145px;
  overflow: hidden;
  border-collapse: collapse;
}

.table1 thead {
  position: relative;
  display: block; 
  width: 1145px;
  overflow: visible;
}

.table1 thead th {
  min-width: 120px;
  height: 32px;
  background: #d3e8be;

}

.table1 thead th:nth-child(1) {
  border-right: 1px solid black;
  position: relative;
  background: #d3e8be;

}

.thfullname > a{
    color : white;
}


.table1 thead td:nth-child(1) {
  border-right: 1px solid black;
  position: relative;
  background : #669950;
}

/*tbody*/
.table1 tbody {
  position: relative;
  display: block; 
  width: 1145px;
  height: 550px;
  overflow: scroll;
}

.table1 tbody td {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  min-width: 120px;
}

.table1 tbody tr td:nth-child(1) { 
  position: relative;
  height: 40px;
}

由于表格应该响应，因此添加了滚动事件并将滚动事件上的表格宽度更改为：

滚动活动

$scope.$on('$viewContentLoaded', function() {       
            $('tbody').scroll(function(e) { //detect a scroll event on the tbodyt
                *//**//**//**//*
                Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
                of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain             it's relative position at the left of the table.
                */
                $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
                $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
                $('thead td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
                $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
                //$('.glyphicon').css("position","inherit");
            });

            var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            tableWidth = w.innerWidth || e.clientWidth || g.clientWidth,
            tableHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
             if(document.getElementById("tableHeader")!=null){
                if(tableWidth>1400){
                    document.getElementById("tableHeader").style.width = tableWidth-300+"px";
                    document.getElementById("tableBody").style.width = tableWidth-300+"px";
                }
            }
        });

现在在Google Chrome上发布!!!

此设置在Google Chrome中的冻结列和标题中正常工作。但是在将列向左移动时存在不透明的问题，它显示了白线，已经尝试了许多解决方案，但没有一个解决这个问题。

Internet Explorer的另一个问题!!!

冻结第一个标题的列，即第一列和第一行的零元素在Internet Explorer上不冻结。意味着我需要第0个元素被冻结，其余的标题应该是可移动的。这适用于Google Chrome。我怎么能让它冻结？

我尝试过固定的表格标题和其他解决方案，但它们对我不起作用，它们会分散用户界面格式。

我如何解决这两个问题？