Ant-design: 😨 Alinhamento de tabela quebrado quando a célula contém número longo ou palavra longa após 3.11.3

No seu caso, adicionar uma largura fixa resolverá

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    width: 200,
  },
  {
    title: "Address",
    dataIndex: "address",
    width:200,
  }
];

O problema de campos contínuos super longos (números longos e palavras longas) destruindo o layout da tabela ( mesmo que você especifique a largura da coluna será espremida ), antes que o componente adicionasse word-break: break-word; por padrão para corrigir tal layout e causará um problema em https://github.com/ant-design/ant-design/issues/13624 . ( captura de tela )

Portanto, a melhor solução provavelmente não é quebrar a palavra padrão, mas fornecer uma propriedade para quebrar linhas para determinadas colunas.

columns={[
  ...
  textWrap: 'word-break',
]}

Você também pode fazer isso com https://github.com/ant-design/ant-design/issues/5753 , suporte

columns={[
  ...
  ellipsis: true,
]}

Observe que antes de 3.24.0, você precisa adicionar um estilo de quebra para as colunas de campos super longos:

columns={[
  ...
  render: (text, record) => (
    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
      {text}
    </div>
  ),
]}

Na versão 3.24.0, o problema de destruição do alinhamento de colunas do campo super longo foi resolvido e a função de omissão foi adicionada. Para a API específica, consulte: https://github.com/ant-design/ant -design/puxar/17284

@lidianhao123 Minhas tabelas todas têm uma largura fixa, e as do link Reprodução podem ser reproduzidas sem escrita, então eu não as escrevi.

@yoyo837 Seu exemplo deve ser corrigido escrevendo largura. Esta situação realmente precisa ser escrita. Parece que não é a situação acima, como eu disse.

https://codesandbox.io/s/3y60m0wvwp

Dê a demonstração cuja largura também está desalinhada e reabra-a.

https://codesandbox.io/s/4zlwnrx734

@yoyo837 Bingo! é um problema com https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241 .

O mesmo problema, como resolver?

No entanto, agora essa alteração não é considerada uma alteração importante e agora só pode ser revertida para a versão 3.10.10, caso contrário, a largura definida não terá efeito e há um grande número de páginas que limitam a largura definindo a largura.

@vxzhong só pode fazer as pazes sozinho primeiro

  .ant-table-fixed {
    table-layout: fixed;
  }

  .ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;
  }

Em seguida, tente especificar a largura da coluna para cada coluna e https://github.com/ant-design/ant-design/issues/17051#issuecomment-501280017 .
Atualize antd normalmente e exclua a solução depois que ela for mesclada.

Este problema ainda não foi resolvido...

Há também um problema. Quando a tabela é criada, o texto na célula da tabela é um valor de enumeração, como 'status'. Neste momento, a largura da célula foi definida e a célula não está dobrada e em seguida, é processado em chinês por solicitação.' O status geral da saída', a célula é dobrada neste momento, fazendo com que a altura da linha correspondente a essa célula fique mais alta, mas a altura da célula fixa correspondente a essa linha não mudou, e a tabela está errada. Isso não tem nada a ver com o navegador. A versão ant é 2.x.por favor resolva

Definir a largura da propriedade da tabela table-layout:fixed; terá efeito

Definir a largura da propriedade da tabela table-layout:fixed; terá efeito

chique, cara, chique!!

Definir a largura da propriedade da tabela table-layout:fixed; terá efeito

vc é o melhor

@zoffyzhang Apenas para largura fixa, não largura responsiva.

Definir a largura da propriedade da tabela table-layout:fixed; terá efeito

Embora tenha efeito, se a coluna for fixa, o campo com texto super longo ainda será esticado

@wulienen envolve o campo super longo, depois de overflow : hidden você pode ignorar a parte em excesso

@wulienen envolve o campo super longo, depois de overflow : hidden você pode ignorar a parte em excesso

Desta forma, o alongamento dinâmico da coluna não pode alcançar a expansão da elipse. 😂

@wulienen envolve o campo super longo, depois de overflow : hidden você pode ignorar a parte em excesso

Desta forma, o alongamento dinâmico da coluna não pode alcançar a expansão da elipse. 😂

O uso dessa propriedade descartará a largura dinâmica do próprio componente. Você precisa definir a largura para cada coluna, caso contrário, ela será distribuída uniformemente. Se o texto precisar ser omitido, text-overflow: ellipsis;

.ant-table-tbody > tr > td {
espaço em branco: nowrap;
}
.ant-table-thead > tr > th{
espaço em branco: nowrap;
}

Eu encontrei o mesmo problema e resolvi perfeitamente depois de combinar as soluções de xupengkun e yoyo837 . Obrigado por seus esforços!

Protótipo do problema <br i="8"/> após a resolução: https://codesandbox.io/s/sg5r2

Nenhuma solução, filho de várias camadas, com caixas de seleção e texto super longo. nesta situação.mais sem solução

@heavenlian dá uma demo reproduzível e eu resolvo para você.

@afc163
É resolvido, escreva um ninho de loop, forneça tr.ant-table-row-level-${i} sob cada tabela, calcule o tamanho do desvio do ícone expandido dentro e, em seguida, defina dinamicamente a largura necessária do texto. ...

Eu resolvi perfeitamente com css

demonstração de códigos e caixa

.ant-table-thead tr {
  display: flex;
}
.ant-table-thead th {
  flex: 1;
}
.ant-table-row {
  display: flex;
}
.ant-table-row td {
  flex: 1;
  overflow: auto;
}
.ant-table-row td::-webkit-scrollbar {
  display: none;
}
.columns {
  display: flex;
  align-items: center;
  width: 0;
}

@ZengTianShengZ perfeito.

Como mostrar e ocultar automaticamente as barras de rolagem?
Ambos paisagem e retrato precisam ser suportados
https://codesandbox.io/s/currying-river-6n2r5

@ZengTianShengZ Trabalho incrível!

Este problema ainda está presente e deve realmente ser resolvido como parte do componente da tabela principal, em vez de aplicar hacks de CSS. Obrigado a todos que ajudaram a fornecer uma correção, mas a tabela deve renderizar os cabeçalhos das colunas corretamente por padrão

https://codesandbox.io/s/sg5r2

Esta solução fornecida pelos usuários acima funciona perfeitamente.
O único problema é que você precisa especificar a largura para cada coluna.
A forma como a tabela deve realmente funcionar é

1. Os cabeçalhos das colunas devem sempre estar alinhados com o corpo
2. Especificar a largura não deve ser um hack ou obrigatório.
3. Você pode especificar a largura em números de porcentagem. Com base nisso, seria uma % da largura total da tabela ou largura fixa especificada em número.
4. Todas as outras colunas se ajustam automaticamente com base no conteúdo do espaço restante após a distribuição fixa ou % de largura.

Verifique http://w2ui.com/web/demos/#!grid/grid -23 como referência.
Esta é uma grade bastante poderosa, infelizmente, para JS puro não reagir. Mas faz tudo isso incrivelmente bem.

.table_nowrap {
  table th,
  table td {
    white-space: nowrap;
  }
}

<div className="table_nowrap">
  <Table scroll={{ x: true }} ... />
</div>

código js:
colunas const = [
{
título: 'goodName',
chave: 'goodName',
dataIndex: 'goodName',
alinhar: 'centro',
largura: 150,
fixo: 'esquerda',
render: (item) => (item || item == 0 ? ( ) : ( -- ))}];código css:.textOverflow{espaço em branco: nowrap!important;estouro: oculto! importante;estouro de texto: reticências!importante;}.maxWidth118{largura máxima: 118px;}Usando um método estúpido, coloque um rótulo na renderização, defina o estilo do rótulo, exiba as reticências muito longas e adicione o atributo title

Solicitação de pull enviada: #17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead tr {
exibição: flexível;
}
.ant-table-thead th {
flexível: 1;
}
.ant-table-row {
exibição: flexível;
}
.ant-table-row td {
flexível: 1;
estouro: automático;
}
.ant-table-row td::-webkit-scrollbar {
Mostrar nenhum;
}
.colunas {
exibição: flexível;
alinhar-itens: centro;
largura: 0;
}

Isso funciona, mas faz com que todas as colunas tenham a mesma largura. Você realmente deseja que a largura de cada coluna seja dinâmica com base no conteúdo.

como definir a largura percentual nas configurações de colunas, parece não funcionar.

Após a implementação da coluna fixa, a largura da coluna fixa suporta porcentagem. Qual é a situação? Ela não suporta porcentagem?

Apoiado por @jane-xxx, se você tiver alguma dúvida, pode enviar um codeandbox para mim para ajudá-lo a ajustá-lo.

largura: 150, largura Defina o tipo de número. corda, nenhum efeito.

OI, migrei de antd 3 para 4, e estou tendo problemas na tabela, inicialmente em e 3 a largura da tabela era a largura dos elementos pai, mas agora parece que a largura está se ajustando ao conteúdo da tabela, eu passei o doc, não consigo encontrar nada para resolver meu problema. Vou anexar a imagem da tabela de ambas as versões para referência.

OI, migrei de antd 3 para 4, e estou tendo problemas na tabela, inicialmente em e 3 a largura da tabela era a largura dos elementos pai, mas agora parece que a largura está se ajustando ao conteúdo da tabela, eu passei o doc, não consigo encontrar nada para resolver meu problema. Vou anexar a imagem da tabela de ambas as versões para referência.

talvez set tableLayout="fixed" ajude

Conteúdo muito curto também fará com que a configuração de largura falhe.~

Por favor, diga-me como lidar com a situação acima?

Dê a demonstração cuja largura também está desalinhada e reabra-a.

Conteúdo muito curto também fará com que a configuração de largura falhe.~

O problema de campos contínuos super longos (números longos e palavras longas) destruindo o layout da tabela ( mesmo que você especifique a largura da coluna será espremida ), antes que o componente adicionasse word-break: break-word; por padrão para corrigir tal layout, e causará o problema em #13624. ( captura de tela )

Portanto, a melhor solução provavelmente não é quebrar a palavra padrão, mas fornecer uma propriedade para quebrar linhas para determinadas colunas.

columns={[
  ...
  textWrap: 'word-break',
]}

Também funciona com #5753, suporte

columns={[
  ...
  ellipsis: true,
]}

Observe que antes de 3.24.0, você precisa adicionar um estilo de quebra para as colunas de campos super longos:

columns={[
  ...
  render: (text, record) => (
    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
      {text}
    </div>
  ),
]}

Na versão 3.24.0, o problema de que o alinhamento da coluna é destruído pelo campo superlongo foi resolvido e a função de omissão foi adicionada. Para a API específica, consulte: #17284

https://github.com/ant-design/ant-design/issues/13825#issuecomment-642389197

Desculpe, mas estou tendo um problema semelhante depois de migrar de 3.x para 4.x.
Minha tabela se parece com isso em 4.x:

Embora pareça bom em 3.x:

Ainda não estou conseguindo reproduzir o problema em um Codesandbox simplificado. Mas enquanto isso, eu apreciaria qualquer ajuda em inglês.

Obrigada!

Desculpe, mas estou tendo um problema semelhante depois de migrar de 3.x para 4.x.
Minha tabela se parece com isso em 4.x:

Embora pareça bom em 3.x:

Ainda não estou conseguindo reproduzir o problema em um Codesandbox simplificado. Mas enquanto isso, eu apreciaria qualquer ajuda em inglês.

Obrigada!

Você definiu a largura da coluna?
Se você já definiu a largura da coluna, tente isso. Este método funciona para mim

<Table
    // some props...
   scroll={{ x: '100%' }} // this x should set '100%', not 'true'
 />

Isso foi corrigido em uma atualização recente.

Como resolver o gap branco vertical ao arrastar horizontalmente

Como resolver o gap branco vertical ao arrastar horizontalmente

Deixe algumas colunas não fixas e não corrija a largura, torne-a adaptável