Ant-design: 😨 Alignement du tableau interrompu lorsque la cellule contient un nombre long ou un mot long après 3.11.3

Dans votre cas, l'ajout d'une largeur fixe le résoudra

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

Le problème des champs continus super longs (nombres longs et mots longs) détruisant la mise en page du tableau ( même si vous spécifiez la largeur de la colonne sera écrasé ), avant que le composant n'ajoute word-break: break-word; par défaut pour corriger une telle mise en page, et causera un problème sur https://github.com/ant-design/ant-design/issues/13624 . ( capture d'écran )

Ainsi, la meilleure solution n'est probablement pas de mettre un mot de rupture par défaut, mais de fournir une propriété pour couper les lignes de certaines colonnes.

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

Vous pouvez également le faire avec https://github.com/ant-design/ant-design/issues/5753 , support

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

Notez qu'avant la version 3.24.0, vous devez ajouter un style de saut pour les colonnes des champs super longs :

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

Dans 3.24.0, le problème de destruction de l'alignement des colonnes du champ super long a été résolu et la fonction d'omission a été ajoutée. Pour l'API spécifique, voir : https://github.com/ant-design/ant -design/pull/17284

@ lidianhao123 Mes tableaux ont tous une largeur fixe, et ceux du lien Reproduction peuvent être reproduits sans écriture, donc je ne les ai pas écrits.

@ yoyo837 Votre exemple doit être corrigé en écrivant la largeur. Cette situation doit vraiment être écrite. Il semble que ce ne soit pas la situation ci-dessus comme je l'ai dit.

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

Donnez la démo dont la largeur est également mal alignée et rouvrez-la.

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

@yoyo837 Bingo ! est un problème avec https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241 .

Le même problème, comment le résoudre ?

Cependant, maintenant ce changement n'est pas considéré comme un changement de rupture, et maintenant il ne peut être annulé que vers la version 3.10.10, sinon la largeur définie ne prendra pas effet, et il y a un grand nombre de pages qui limitent la largeur en définissant la largeur.

@vxzhong ne peut d'abord le rattraper que par lui-même

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

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

Essayez ensuite de spécifier la largeur de colonne pour chaque colonne et https://github.com/ant-design/ant-design/issues/17051#issuecomment-501280017 .
Mettez à niveau antd normalement et supprimez la solution après sa fusion.

Ce problème n'est pas encore résolu...

Il y a également un problème. Lorsque le tableau est créé, le texte de la cellule du tableau est une valeur d'énumération, telle que "statut". À ce stade, la largeur de la cellule a été définie, la cellule n'est pas pliée et puis il est rendu en chinois sur demande.' L'état de sortie global', la cellule est pliée à ce moment, ce qui fait que la hauteur de la ligne correspondant à cette cellule devient plus élevée, mais la hauteur de la cellule fixe correspondant à cette ligne a n'a pas changé et le tableau est erroné. Cela n'a rien à voir avec le navigateur. La version ant est 2.x.s'il vous plait résolvez le

La définition de la propriété de table table-layout:fixed; width prendra effet

La définition de la propriété de table table-layout:fixed; width prendra effet

chic, mec, chic !!

La définition de la propriété de table table-layout:fixed; width prendra effet

t'es le meilleur

@zoffyzhang Uniquement pour la largeur fixe, pas la largeur réactive.

La définition de la propriété de table table-layout:fixed; width prendra effet

Bien que cela prenne effet, si la colonne est fixe, le champ avec un texte super long sera toujours étiré

@wulienen enveloppe le champ super long, après overflow : hidden vous pouvez ignorer la partie excédentaire

@wulienen enveloppe le champ super long, après overflow : hidden vous pouvez ignorer la partie excédentaire

De cette manière, l'étirement dynamique de la colonne ne peut pas atteindre l'expansion des points de suspension. 😂

@wulienen enveloppe le champ super long, après overflow : hidden vous pouvez ignorer la partie excédentaire

De cette manière, l'étirement dynamique de la colonne ne peut pas atteindre l'expansion des points de suspension. 😂

L'utilisation de cette propriété supprimera la largeur dynamique du composant lui-même. Vous devez définir la largeur de chaque colonne, sinon elle sera répartie uniformément. Si le texte doit être omis, text-overflow: ellipsis;

.ant-table-tbody > tr > td {
espace blanc : nowrap ;
}
.ant-table-thead > tr > th{
espace blanc : nowrap ;
}

J'ai rencontré le même problème et l'ai parfaitement résolu après avoir combiné les solutions de xupengkun et yoyo837 . Merci pour vos efforts !

Prototype de problème <br i="8"/> après résolution : https://codesandbox.io/s/sg5r2

Pas de solution, enfants multicouches, avec des cases à cocher et un texte super long. dans cette situation.plus non résolu

@heavenlian donne une démo reproductible et je la réparerai pour vous.

@afc163
Il est résolu, écrivez un nid de boucle, donnez tr.ant-table-row-level-${i} sous chaque table, calculez la taille de l'écart de l'icône développée à l'intérieur, puis définissez dynamiquement la largeur requise du texte. ...

Je l'ai parfaitement résolu avec css

démo codesandbox

.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 parfait.

Comment afficher et masquer automatiquement les barres de défilement ?
Le paysage et le portrait doivent être pris en charge
https://codesandbox.io/s/currying-river-6n2r5

@ZengTianShengZ Travail incroyable !

Ce problème est toujours présent et devrait vraiment être résolu dans le cadre du composant principal de la table, au lieu d'appliquer des hacks CSS. Merci à tous ceux qui ont aidé à fournir un correctif, mais le tableau devrait afficher correctement les en-têtes de colonne par défaut

https://codesandbox.io/s/sg5r2

Cette solution fournie par les utilisateurs ci-dessus fonctionne parfaitement.
Le seul problème étant que vous devez spécifier la largeur de chaque colonne.
La façon dont la table devrait vraiment fonctionner est

1. Les en-têtes de colonne doivent toujours être alignés avec le corps
2. Spécifier la largeur ne devrait pas être un hack ou obligatoire.
3. Vous pouvez spécifier la largeur en nombre de pourcentage. Sur cette base, il s'agirait d'un % de la largeur totale du tableau ou de la largeur fixe spécifiée en nombre.
4. Toutes les autres colonnes s'ajustent automatiquement en fonction du contenu de l'espace restant après la distribution de largeur fixe ou en %.

Vérifiez http://w2ui.com/web/demos/#!grid/grid -23 comme référence.
C'est une grille assez puissante hélas pour du pur JS qui ne réagit pas. Mais il fait tout cela incroyablement bien.

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

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

code js :
colonnes constantes = [
{
titre : 'bonNom',
clé : 'bonNom',
dataIndex : 'bonNom',
aligner : 'centrer',
largeur : 150,
corrigé : 'gauche',
rendre : (élément) => (élément || élément == 0 ? ( ) : ( -- ))}] ;code css :.textOverflow{espace blanc : maintenant ! important ;débordement : masqué ! important ;débordement de texte : ellipse ! important ;}.maxWidth118{largeur maximale : 118px ;}En utilisant une méthode stupide, mettez une étiquette dans le rendu, définissez le style de l'étiquette, affichez les points de suspension trop longtemps et ajoutez l'attribut title

Demande d'extraction envoyée : #17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-tête tr {
affichage : flexible ;
}
.ant-table-tête th {
flexibilité : 1 ;
}
.ant-table-ligne {
affichage : flexible ;
}
.ant-table-ligne td {
flexibilité : 1 ;
débordement : automatique ;
}
.ant-table-row td ::-webkit-scrollbar {
affichage : aucun ;
}
.Colonnes {
affichage : flexible ;
align-items : center ;
largeur : 0 ;
}

Cela fonctionne, mais rend toutes les colonnes de largeur égale. Vous voudriez vraiment que la largeur de chaque colonne soit dynamique en fonction du contenu.

comment définir la largeur en pourcentage dans les paramètres des colonnes, semble ne pas fonctionner.

Une fois la colonne fixe implémentée, la largeur de la colonne fixe prend en charge le pourcentage. Quelle est la situation ? Ne prend-elle pas en charge le pourcentage ?

Soutenu par @jane-xxx, si vous avez des questions, vous pouvez m'envoyer un codesandbox pour vous aider à l'ajuster.

largeur : 150, largeur Définir le type de numéro. chaîne, aucun effet.

HI, j'ai migré d'antd 3 à 4, et je rencontre un problème dans la table, initialement dans et 3 la largeur de la table était la largeur des éléments parents, mais maintenant il semble que sa largeur s'adapte au contenu de la table, j'ai traversé la doc, je ne trouve rien pour résoudre mon problème. Je joindrai l'image du tableau des deux versions pour référence.

HI, j'ai migré d'antd 3 à 4, et je rencontre un problème dans la table, initialement dans et 3 la largeur de la table était la largeur des éléments parents, mais maintenant il semble que sa largeur s'adapte au contenu de la table, j'ai traversé la doc, je ne trouve rien pour résoudre mon problème. Je joindrai l'image du tableau des deux versions pour référence.

peut-être que set tableLayout="fixed" aidera

Un contenu très court entraînera également l'échec du réglage de la largeur.~

S'il vous plaît dites-moi comment gérer la situation ci-dessus?

Donnez la démo dont la largeur est également mal alignée et rouvrez-la.

Un contenu très court entraînera également l'échec du réglage de la largeur.~

Le problème des champs continus super longs (nombres longs et mots longs) détruisant la mise en page du tableau ( même si vous spécifiez la largeur de la colonne sera écrasé ), avant que le composant n'ajoute word-break: break-word; par défaut pour corriger telle mise en page, et causera le problème dans # 13624. ( capture d'écran )

Ainsi, la meilleure solution n'est probablement pas de mettre un mot de rupture par défaut, mais de fournir une propriété pour couper les lignes de certaines colonnes.

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

Fonctionne également avec #5753, prend en charge

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

Notez qu'avant la version 3.24.0, vous devez ajouter un style de saut pour les colonnes des champs super longs :

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

Dans la version 3.24.0, le problème de destruction de l'alignement des colonnes par le champ super long a été résolu et la fonction d'omission a été ajoutée. Pour l'API spécifique, voir : #17284

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

Je suis désolé mais j'ai un problème similaire après avoir migré de 3.x à 4.x.
Ma table ressemble à ceci sur 4.x :

Alors que ça a l'air bien dans 3.x:

Je ne parviens toujours pas à reproduire le problème dans une Codesandbox simplifiée. Mais en attendant, j'apprécierais toute aide en anglais.

Merci!

Je suis désolé mais j'ai un problème similaire après avoir migré de 3.x à 4.x.
Ma table ressemble à ceci sur 4.x :

Alors que ça a l'air bien dans 3.x:

Je ne parviens toujours pas à reproduire le problème dans une Codesandbox simplifiée. Mais en attendant, j'apprécierais toute aide en anglais.

Merci!

Avez-vous défini la largeur de colonne ?
Si vous avez déjà défini la largeur de colonne, veuillez essayer ceci. Cette méthode fonctionne pour moi

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

Cela a été corrigé dans une mise à jour récente.

Comment résoudre l'espace blanc vertical lorsque vous faites glisser horizontalement

Comment résoudre l'espace blanc vertical lorsque vous faites glisser horizontalement

Laissez des colonnes non fixes et ne fixez pas la largeur, rendez-la adaptative