应用变换平移时，td边框消失
我正在构建一个具有固定标题和固定第一列的表。
通过在scroll事件上应用transform translateX / Y来保持标题和列的固定。
页面加载时，顶行显示边框，但一旦向下滚动，它们就会消失。
我需要什么CSS才能让边框消失？
可以在这里找到带有源头的掠夺者。
我遇到了类似的情况并添加了border-collapse: separate;border-spacing: 0px; 到表固定这个。
边界崩溃：分开; – ：这为表格单元格设置了单独的边框，如果它的边界崩溃：崩溃; 然后细胞分享他们的边界。
当我们翻译时，只有细胞移动分享它们的边界并导致问题。
table.scroll { table-layout: fixed; border-spacing: 0px; border: 1px solid #333; border-collapse: separate; }
document.getElementById("table-container").addEventListener("scroll", function() { var translate = "translate(0," + this.scrollTop + "px)"; this.querySelector("thead").style.transform = translate; });
thead, tr, th, td, tbody{ border: 1px solid; text-align: center; padding: 3px; } table.scroll { table-layout: fixed; border-spacing: 0px; border-collapse: separate; } th{ background-color:#99ccff; height: 40px; font-size: 20px; } tr{ width: 500%; height: 20px; font-size: 17px; } tr:nth-child(even) { background-color: #CCFFFF; } tr:nth-child(odd) { background-color: #fae8d1; } #table-container{ float:left; height: 200px; border: 2px solid; overflow: auto; }
Name Birthday Gender Marital Address Telephone Email Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data