一、固定表頭后表體列和表頭不對齊

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

按照官網說的：

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

2、建議指定?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?大于表格寬度的值。

二、配置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);

總結

以上是生活随笔為你收集整理的antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。