固定列&表頭

對於表格資訊來說，往往有些資訊是重要的，需要一目瞭然的看清楚，而不是通過滾動才能看到使用者需要的資訊。將關鍵的表格列進行固定，而次要資訊放置在可滾動檢視的容器中，可以突出表格資訊的重要性，同時，對於方便使用者更好的在當前視窗進行互動，而不需要更多的操作。

對於以上兩種互動的優化，Ant Design - A UI Design Language給出了很好的示例。

對於固定頭和列的表格資料互動方式，現有的元件庫均有對應的實現，比較常見的對應有：

• React：Ant Design - A UI Design Language
• Vue：Element
  ，iView - A high quality UI Toolkit based on Vue.js
• Regular: 表格 - nek-ui

佈局

在考慮表頭和列進行固定時，我們首先需要考慮的是如何對錶格進行佈局來同時滿足上下和左右的滾動。

1，如果依據左右滾動佈局，那麼整個表格分為左，中，右三部分，中間overflow左右滾動。那麼，如果同時滿足表頭固定後，body上下滾動，需要js事件監聽中間部分的上下滾動，同時對左右表格的body部分進行滾動。

2，如果依據上下滾動佈局，那麼，整個表格將分為兩大部分，thead和tbody，內容部分溢位後滾動。那麼，如果需要同時滿足中間部分進行左右滾動，需要在tbody左右滾動時，同時控制thead的中間進行滾動，需要js監聽tbody的scroll事件，對thead進行滾動。

這兩種方式均需要通過js監聽scroll事件，來滿足另一部分的滾動事件，示例的demo比較簡陋。對比這兩種方式，可以說實現上都差不多，現有元件庫的實現均為第一種方式。採用這一類佈局的共同點和優勢如下：

• 將表頭和內容分開為兩部分，便於控制表頭固定。
• 通過佈局滿足上下或者左右的滾動，通過js控制另一方向的滾動，相對於完全通過js控制滾動更有優勢。
• 需要特別注意的一點是，中間內容的表格需要包含左右固定的兩列，而不是完全拆分，左右固定的列僅僅是通過固定佈局覆蓋現有的資料。這樣做的優勢是保證在中間部分滾動的時候，滾動條屬於整個table表格而不是中間部分，給使用者視覺上的整個表格滾動的互動體驗，這樣也保證了一個方向上的完全滾動。
• 左右滾動佈局需要在body滾動的同時控制左側固定列和右側固定列同時滾動，相對於上下滾動佈局僅僅需要控制表頭內容左右滾動來說，減少一次計算控制。本以為佈局2在資料量大的情況下，相對佈局一發生抖動的可能性更大，但是在5000行資料測試下（僅測試chrome），發現滾動時，兩者相差不大。

具體可以參考：https://segmentfault.com/a/1190000012568782