CSS使用不透明度，然后滚动表格，tbody的td覆盖了thead，为什么？

Question

我使用此CSS将表设置为禁用。

.disabledDiv {
    pointer-events: none;
    opacity: 0.9;
}

我必须使用这种透明度。

当我滚动滚动条时，tbody的td覆盖了thead的th，就像这样：

我不希望这件事被遮住，这是我的code link in jsfiddle。

如何使不被覆盖？

Answer 1

正如@Gerard所提到的，您具有用于滚动thead部分的滚动事件的eventListener。解决方案-只需删除thead部分的js部分。

document.getElementById("table_reach_condition_appoint").addEventListener("scroll", function(){
           var translate = "translate(0,"+this.scrollTop+"px)";
           this.querySelector("thead").style.transform = translate;
        });