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

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

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

“CSS3 Transform create new stacking context”

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

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

"不就是因?yàn)榱性卦诒眍^的底下嘛”

想到這里，很激動(dòng)。

于是生成表時(shí)，這樣寫(xiě)：

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

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

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

附：

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

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

昨天下午突然看到transform的方法，其實(shí)寫(xiě)表插件的開(kāi)始，我也想過(guò)到這個(gè)，但一直沒(méi)動(dòng)手去做，因?yàn)橐恢睕](méi)有搜到過(guò)有人這么用。或許是老天可憐我了，讓我1分鐘看了文章，半小時(shí)解決問(wèn)題，高興得想哭，我逝去的時(shí)間呀。。。。。

最新評(píng)論