固定ant design table表头，css相关问题？

Question

想要固定ant design 表头，长度设置100%不生效，如何处理

完整代码如下
https://codesandbox.io/embed/...

Answer 1

使用position: sticky， 来实现最简单。
另外当table 设置scroll属性时 有点兼容性问题，可以按下面方案处理

.tableSticky {
  thead.ant-table-thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import TableProps from 'antd/lib/table';
import './index.less';

export default (props: TableProps) => {
  // 是否显示滚动条
  const [showScroll, setShowScroll] = useState<boolean>(true);

  function setFixedTitle(maxWidth: number) {
    setShowScroll(maxWidth > document.documentElement.clientWidth);
  }

  useEffect(() => {
    const maxWidth = props?.scroll?.x;
    if (maxWidth) {
      // 监听屏幕宽度的变化
      window.onresize = function () {
        setFixedTitle(maxWidth);
      };
    }
    setFixedTitle(maxWidth);
  }, []);

  return (
    <div className={'tableSticky'}>
      {showScroll ? (
        <Table {...props} />
      ) : (
        <Table
          {...{
            ...props,
            scroll: {},
          }}
        />
      )}
    </div>
  );
};