Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
#995 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

Comece reproduzindo o exemplo de Table sticky relatado com as colunas e os dados fornecidos, tableLayout="auto", sticky e as configurações de rolagem horizontal em diferentes tamanhos e resoluções do navegador. Rastreie os limites do cabeçalho sticky e das colunas de conteúdo e, em seguida, verifique se as linhas verticais permanecem alinhadas no cenário reproduzido.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

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,
    }}
  />

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

Linguagem predominante
TypeScript
Estrelas
1.4k
Forks
618
Merge médio
10h 19min
PRs com merge (30d)
2

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-component/table

Todas as issues de react-component/table

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.