固定ant design table表头,css相关问题?

tuihou123321
  • 401
回复
阅读 150
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>
  );
};
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏