关于 AntDesign 的 Table 表头会不渲染，并且自动加上 visiblility: hidden
0
悬赏园豆：80
[已解决问题]
解决于 2025-07-08 22:59
这个visiblility: hidden 不是人为加的，复现的话，在请求页面js文件未完成的时候，切换了页面，把这个页面隐藏了，再回来就这样了，我看社区也没有啥解决办法
表头我可以让它显示，宽度我这里可以自己操作Dom 加上对应的col
但是拖拽列宽的时候列宽改变的时候，表头就会落下，就会对不齐了，
拖拽更改列宽 是用的react-resizable二次封装的， 这里可以在加上对应的col的时候处理一下
现在我想知道为啥会这样，AntDesign库Table 为啥会发生这个现象？是因为页面样式display: none 没有在layout树里么？
最佳答案
1
github 上有人问过这个问题 https://github.com/ant-design/ant-design/issues/31427
收获园豆：80
是的，当时我找到的就是这个，没找出根本问题来
@前端小趴才: 可以先用一个临时解决方法
table {
visibility: visible !important;
}
@dudu: 这个我已经已经解决了，只加这个样式是混乱的，我写的js文件来操作dom处理的表头的拖拽， 现在想从源码来找下问题发生的原因
@前端小趴才: 答案在 useColumnWidth 函数的实现中 src/FixedHolder/index.tsx#L12
function useColumnWidth(colWidths: readonly number[], columCount: number) {
return useMemo(() => {
const cloneColumns: number[] = [];
for (let i = 0; i < columCount; i += 1) {
const val = colWidths[i];
if (val !== undefined) {
cloneColumns[i] = val;
} else {
return null;
}
}
return cloneColumns;
}, [colWidths.join('_'), columCount]);
}
列宽没有值，就直接 return null 了
@dudu: 噢噢噢，这里return了，迷糊了，没看出来，感谢🙏🏻
@前端小趴才: 改了，rc-table打了个patch，比之前的修改简单多了
@前端小盖: 修改提示： 这里默认100右侧固定列位置会有问题， 改成0就好了
