解決react使用antd table組件固定表頭後，表頭和表體列不對齊以及配置fixed固定左右側後行高度不對齊

1、固定表頭後表體列和表頭不對齊

此問題可能在antd3.24.0版本以前都存在，反正3.16.2版本是存在這個問題的，若是是3.24.0以前的版本估計只能經過修改css樣式解決。

按照官網說的：

　　一、若列頭與內容不對齊或出現列重複，請指定固定列的寬度 width。若是指定 width 不生效，請嘗試建議留一列不設寬度以適應彈性佈局，或者檢查是否有超長連續字段破壞佈局。

　　二、建議指定 scroll.x 爲大於表格寬度的固定值或百分比。注意，且非固定列寬度之和不要超過 scroll.x。

 

若是按照以上方法處理仍是存在部分誤差，能夠嘗試給須要固定表頭table設置css屬性table-layout:fixed。

能夠看到官網在3.24.0版本後table組件的屬性新增了tableLayout，https://ant.design/components/table-cn/#API 。其默認值說明裏也介紹了：固定表頭/列或使用了 column.ellipsis時，默認值爲 fixed

若是給column設置啦屬性ellipsis:true，table的tableLayout會默認爲fixed。

固然添加table-layout:fixed的同時仍是須要知足官網說的給每列設置width、scroll.x 大於表格寬度的值。

 

2、配置fixed固定左右側列後，固定列的行高和表體內容行高不對齊

1.默認初始化數據渲染後不對齊

只是普通展現列表，數據渲染完後不對齊的狀況，能夠確認下table配置的rowKey是否每行都存在該字段值，若是都不存在爲null或者部分不存在會致使行高不對齊，以下圖：

 

2.數據已經渲染，手動操做內容致使不對齊

　　若是表格內容會動態改變，好比可編輯表格內容校驗失敗後，下面顯示錯誤信息、表格內容是能夠多選的下拉選擇框，選擇的選項超過本來行高後表格內容被撐開等，都不會觸發table動態計算fixed列和表格內容的高度，因此會出現行高不對齊。

　　在antd V4版本里以上問題獲得瞭解決，並添加了可展開行和固定列功能的結合功能，能夠看該連接的說明https://zhuanlan.zhihu.com/p/102037418，可是antd v4版本不兼容IE11如下的瀏覽器，並且v3用的還有不少，這個問題已經成爲遺留問題，github有說http://react-component.github.io/table/examples?path=/story/rc-table--readme能夠單獨下載引用實現對齊，不知道該組件是否爲v4中的組件，是否不兼容低版本的IE。

　　v3的版本里只能本身去根據內容動態去計算處理了，不過antd的table會在窗口resize的時候，從新計算表格的排版，能夠使用這個方式更快捷的實現行高對齊，不過可能性能會差一點。能夠使用以下方法，在須要從新計算表格行高的時候觸發

const myEvent = new Event('resize'); window.dispatchEvent(myEvent);

　　　　或者使用https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver監聽DOM的高度變化，而後執行從新計算fixed的表格行高。不過不兼容<IE11。

 

　另附上網上看到的介紹antd table各類不對齊的總結http://www.javashuo.com/article/p-stutsnqk-nh.html，更多狀況能夠裏面看下。