最近嘗試了幾種HTML的table固定表頭的方法..額...各有利弊,但很尷尬.....
1.thead和tbody的display設置為block;
這種可以實現,但是需要提前設置好每個th和td的寬度,否則th和對應的td會錯開,無法對齊;
2.用兩個table模擬,第一個作為thead,第二個作為tbody;
需要動態設置單元格寬度,基本上滿足需求,但是在firefox中,會有一點點瑕疵,單元格邊框會錯開一點點;
3.今天在<前端亂燉>上找到的一個好方法,很好用,利用transform動態設置thead的scrollTop屬性
模擬出來的固定表頭,相對前兩個方法簡單很多,效果也很不錯;
下面是原文鏈接:
2017-0524
有朋友發現了第三種方法的一個bug
沒有邊框是是沒有任何問題的 如果th,td有邊框的話 在滾動之后,th的邊框會消失
經測試,發現原因為在transform時,th中的邊框並沒有移動,只有文字內容和背景色移動了, 而且再移動回初始位置時(即表格頂部),
背景色會蓋在邊框上面,導致看不到th的邊框了
暫時只想到了一種勉強的替代方法, 就是在th中增加div, 這樣 背景色,文字內容在滾動時,便不會覆蓋邊框了
但是在滾動時, 還是會有點兒瑕疵....
如果路過的大神感興趣....希望能夠幫忙解決掉......