的Javascript轉化邊框與標題

Question

我通過

onScroll={() => { 
    document.querySelector('thead').style.transform = 
    `translate(0,${this.scrollRef.scrollTop}px)`; 
}} 

鎖定表頭，但是當我滾動表頭邊框不會粘在頭。

滾動時如何讓邊框保留在標題上？

Answer 1

這將解決您的問題：

thead th { 
    position:relative; 
} 
thead th:before { 
    content: ''; 
    position: absolute; 
    height: calc(100% + 2px); 
    width: calc(100% + 2px); 
    border: 1px solid black; 
    top: -1px; 
    left: -1px; 
    pointer-events: none; 
} 

不，JavaScript是不是轉化邊界。問題是邊框實際上並不是<th>元素的一部分，因爲它們已摺疊。

在內部，瀏覽器檢查相鄰元素以確定組合邊框。這些邊界的位置沒有考慮到transform s應用於<th>元素，但它們的最初的在DOM中的位置。

最簡單的解決方案是使用:before僞元素來繪製邊框。

---

其他的解決辦法是在你的<table>，通過bootstrap.css應用覆蓋

border-collapse: collapse; 

。
但是這意味着你的表格邊框將不再被摺疊（合併），而且很可能你不需要這樣做。