大家可能經常需要展示資料或者報表,表頭如果滾動上去後,檢視資料的類別和欄位是個麻煩事情,在這裡我們推薦來自tympanus的一個JS實現的 table表頭固定效果,相信大家肯定會受益的,這個demo使用了jQuery來實現,所以能夠很好的支援各種瀏覽器上的報表展示!

這裡有兩點值得大家討論:

為什麼不使用position:fixed來實現表頭固定

使用fixed的好處在於:

  • 無需計算滾動中的偏移,而使用JS需要自己處理
  • 沒有滾動響應的延遲,效果可能更好

但是fixed有一個非常重要的缺點:

如果你的table寬度超出了容器,那麼水平的overflow需要設定,但是這個時候,你會發現fixed的表頭不會再滾動了,應為它已經脫離了文件的佈局,這就是為什麼有這麼多的開源的表頭固定處理JS