Recentemente, quando estava fazendo estatísticas do projeto, encontrei um requisito específico, exigindo que a tabela fosse consertada ao rolar para cima e para baixo; Ao rolar para a esquerda e para a direita, a tabela é fixada na primeira coluna da tabela, a última coluna da primeira coluna da tabela é fixa.
Pode ser mais claro colocar as renderizações em primeiro lugar:
Ao rolar para a esquerda e para a direita, as duas colunas são fixas e a parte do meio da cabeça e da traseira rolam de acordo.
Ao rolar para cima e para baixo, a cabeça e a cauda são fixos e a parte do meio da primeira e das últimas colunas rola de acordo.
Ideias:Depois de pensar por um longo tempo, descobri que é basicamente difícil de conseguir se eu simplesmente usar uma tabela, e há lugares conflitantes ao rolar para cima e para baixo. Finalmente, mudei de idéia para usar o layout da div e imitar o design da tabela para alcançar esse efeito.
resolver: 1. Layout geral: dividido em três partes: superior, médio e inferior, a saber, cabeçalho, corpo e rodapé. O corpo é sólido. Implementar rolagem para cima e para baixo. Não é muito simples? Haha. 2. Layout do cabeçalho: dividido no recipiente esquerdo, esquerda 10% de largura flutua para a esquerda, o recipiente de 80% de largura flutua para a esquerda, a largura direita 10% flutua para a esquerda. Adicione um contêiner com a largura real do contador de colunas de dados (posicionamento relativo).3. Corpo, rodapé e cabeçalho.
4 Core de controle: Gere uma (80%) div com a mesma largura que o contêiner e coloque uma div com a mesma largura de dados real que o contador de coluna (como id = scroll). Para simular barras de rolagem esquerda e direita.
JavaScript Code Copy Content para a área de transferência