Ant Design表格表头固定：CSS技巧
在使用Ant Design表格时，直接设置width: 100%无法实现表头固定效果。本文将详解如何利用CSS解决此问题。
问题根源
width: 100%虽然使表头占据表格全部宽度，但它仍然受父容器滚动影响，无法实现真正的固定。
立即学习“前端免费学习笔记（深入）”；
解决方案：position: sticky
position: sticky属性是解决此问题的关键。它允许元素在滚动时保持在指定位置，直到达到特定边界。对于表头，我们希望它粘附在表格顶部。
以下CSS代码实现表头固定：
<code class="css">.tablesticky {
thead.ant-table-thead {
position: sticky;
top: 0;
z-index: 1;
}
}</code>
这段代码确保表头在滚动时始终固定在顶部，并防止被其他内容遮挡。
进阶方案：动态调整
在某些情况下，尤其当表格设置了水平滚动条(scroll.x)时，可能会出现兼容性问题。这时，建议采用动态调整的方式：
<code class="javascript">import { useEffect, useState } from 'react';
import { Table } from 'antd';
import './index.less';
export default (props) => {
const [showScroll, setShowScroll] = useState(true);
const setFixedTitle = (maxWidth) => {
setShowScroll(maxWidth > document.documentElement.clientWidth);
};
useEffect(() => {
const maxWidth = props?.scroll?.x;
if (maxWidth) {
window.onresize = () => setFixedTitle(maxWidth);
}
setFixedTitle(maxWidth);
}, []);
return (
<div className="tableSticky">
{showScroll ? (
<Table {...props} />
) : (
<Table {...props} scroll={{ x: '' }} />
)}
</div>
);
};</code>
此代码根据表格实际宽度和屏幕宽度动态切换position: sticky，避免出现多余滚动条。 请注意，这需要根据你的具体 Ant Design 版本和项目结构进行调整。
通过以上方法，您可以轻松解决Ant Design表格表头固定失效的问题，提升用户体验。
