Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sticky时表头和内容列的竖线不对齐 #995

Open
ooooevan opened this issue May 24, 2023 · 1 comment
Open

sticky时表头和内容列的竖线不对齐 #995

ooooevan opened this issue May 24, 2023 · 1 comment

Comments

@ooooevan
Copy link

在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐

image
代码

const columns: ColumnType<{ a: string; b: string; c: string }>[] = [
  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
  { title: 'title2', dataIndex: 'b', key: 'b',  align: 'right' },
  { title: 'title3', dataIndex: 'c', key: 'c', },
  { title: 'title3', dataIndex: 'c1', key: 'c1', },
  { title: 'title3', dataIndex: 'c2', key: 'c2', },
  { title: 'title3', dataIndex: 'c3', key: 'c3', },
  {
    title: 'Operations',
    dataIndex: '',
    key: 'd',
    fixed: 'right',
    render(_, record) {
      return (
        <a
          onClick={e => {
            e.preventDefault();
            console.log('Operate on:', record);
          }}
          href="#"
        >
          Operations
        </a>
      );
    },
  },
];

const data = [
  { a: '123', key: '1' },
  { a: 'cdd', b: 'edd', key: '2' },
  { a: '1333', c: 'eee', d: 2, key: '3' },
  { a: '1333', c: 'eee', d: 2, key: '4' },
  { a: '1333', c: 'eee', d: 2, key: '5' },
  { a: '1333', c: 'eee', d: 2, key: '6' },
  { a: '1333', c: 'eee', d: 2, key: '7' },
  { a: '1333', c: 'eee', d: 2, key: '8' },
  { a: '1333', c: 'eee', d: 2, key: '9' },
  { a: '1333', c: 'eee', d: 2, key: '10' },
  { a: '1333', c: 'eee', d: 2, key: '11' },
  { a: '1333', c: 'eee', d: 2, key: '12' },
  { a: '1333', c: 'eee', d: 2, key: '13' },
  { a: '1333', c: 'eee', d: 2, key: '14' },
  { a: '1333', c: 'eee', d: 2, key: '15' },
  { a: '1333', c: 'eee', d: 2, key: '16' },
  { a: '1333', c: 'eee', d: 2, key: '17' },
  { a: '1333', c: 'eee', d: 2, key: '18' },
  { a: '1333', c: 'eee', d: 2, key: '19' },
  { a: '1333', c: 'eee', d: 2, key: '20' },
];


<Table<RecordType>
    columns={columns}
    data={data}
    tableLayout="auto"
    sticky
    scroll={{
      x: 800,
    }}
    style={{
      marginBottom: 100,
    }}
  />

在文档示例中偏差没那么明显,在业务项目中列的数量更多,还有其他计算,偏差更大
请问有什么思路解决吗

@hejinguo
Copy link

hejinguo commented Oct 19, 2023

你好,我也发现是有这个问题,请问有解决办法吗? @ooooevan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants