我想鎖表頭及鎖定列。昨天新找的方法是用css3的transform,這個應(yīng)該在IE9以上都可以的。

只鎖頭效果很好，IE11下會小抖，但chrome下很穩(wěn)定停在那里。后來又加上鎖定列，發(fā)現(xiàn)列會蓋住表頭。

百度到這里《小心 CSS3 Transform 引起的 z-index "失效"》

“CSS3 Transform create new stacking context”

這個道理想想也明白，Transform 就是一個影子，假像，所以它不考慮z-index.那怎么解決呢？

再百度，以及去stackoverflow看文章，也沒辦法。既然不能控制“new stacking context"想想為什么列會蓋住表頭吧??

"不就是因為列元素在表頭的底下嘛”

想到這里，很激動。

于是生成表時，這樣寫：

 tbody = $('<tbody>'); me.prepend(tbody);

原來寫的是append,現(xiàn)在改為prepend,這樣保證table內(nèi)的順序是tbody,thead,tfoot.

測試各各瀏覽器，正常了！超牛逼。突然感覺到，原來人是有著無窮創(chuàng)造力及折騰力。

附：

這很長時間都在折騰鎖表頭，鎖列的問題。我本人首先否定克隆表等方法，頁面混亂，很多地方需要手工對齊，新元素在表之上，影響表頭上的事件。于是我之后就是無窮的折騰了。

既然我必須要在一個table中實現(xiàn)，試了很多方法，寫了很多css,js,無非就是讓td,th浮起來，或是在里面加入元素后再浮起來，無論如何做， 結(jié)果就是速度慢了下來，鎖定部分跳動。  也試過其它插件（克隆表頭，然后fix在那里），可能是用法問題，多少有些問題。折騰得想放棄了。

昨天下午突然看到transform的方法，其實寫表插件的開始，我也想過到這個，但一直沒動手去做，因為一直沒有搜到過有人這么用。或許是老天可憐我了，讓我1分鐘看了文章，半小時解決問題，高興得想哭，我逝去的時間呀。。。。。

最新評論