Ant-design: 😨 Tabellenausrichtung unterbrochen, wenn die Zelle nach 3.11.3 eine lange Zahl oder ein langes Wort enthält

In Ihrem Fall löst es das Hinzufügen einer festen Breite

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

Das Problem von superlangen fortlaufenden Feldern (lange Zahlen und lange Wörter) , die das Layout der Tabelle zerstören ( selbst wenn Sie die Breite der Spalte angeben, wird herausgedrückt ), bevor die Komponente standardmäßig word-break: break-word; hinzufügt, um zu korrigieren ein solches Layout und verursacht ein Problem unter https://github.com/ant-design/ant-design/issues/13624 . ( Bildschirmfoto )

Die beste Lösung ist also wahrscheinlich, das Wort nicht standardmäßig umzubrechen, sondern eine Eigenschaft bereitzustellen, um Zeilen für bestimmte Spalten umzubrechen.

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

Sie können dies auch mit https://github.com/ant-design/ant-design/issues/5753 tun, Unterstützung

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

Beachten Sie, dass Sie vor 3.24.0 einen Unterbrechungsstil für die Spalten von superlangen Feldern hinzufügen müssen:

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

In 3.24.0 wurde das Problem behoben, dass die Spaltenausrichtung des superlangen Feldes zerstört wird, und die Auslassungsfunktion hinzugefügt.Für die spezifische API siehe: https://github.com/ant-design/ant -Design/Pull/17284

@lidianhao123 Meine Tabellen haben alle eine feste Breite, und die im Reproduktionslink können ohne Schreiben reproduziert werden, also habe ich sie nicht geschrieben.

@yoyo837 Ihr Beispiel sollte durch Schreiben der Breite korrigiert werden.Diese Situation muss wirklich geschrieben werden.Es scheint, dass es nicht die obige Situation ist, wie ich sagte.

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

Geben Sie die Demo an, deren Breite ebenfalls falsch ausgerichtet ist, und öffnen Sie sie erneut.

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

@yoyo837 Bingo! ist ein Problem mit https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241 .

Das gleiche Problem, wie löst man es?

Allerdings gilt diese Änderung jetzt nicht mehr als Breaking Change und kann jetzt nur noch auf die Version 3.10.10 zurückgesetzt werden, da sonst die eingestellte Breite nicht wirksam wird und es eine Vielzahl von Seiten gibt, die die Breite per Einstellung begrenzen die Breite.

@vxzhong kann es erstmal nur alleine aufholen

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

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

Versuchen Sie dann, die Spaltenbreite für jede Spalte anzugeben, und https://github.com/ant-design/ant-design/issues/17051#issuecomment-501280017 .
Aktualisieren Sie antd normal und löschen Sie die Lösung, nachdem sie zusammengeführt wurde.

Dieses Problem ist noch nicht gelöst...

Es gibt auch ein Problem: Wenn die Tabelle erstellt wird, ist der Text in der Tabellenzelle ein Aufzählungswert, beispielsweise „Status". Zu diesem Zeitpunkt wurde die Breite der Zelle festgelegt, und die Zelle ist nicht gefaltet, und dann wird es auf Anfrage in Chinesisch gerendert. "Gesamtausgabestatus", die Zelle wird zu diesem Zeitpunkt gefaltet, was bewirkt, dass die Höhe der dieser Zelle entsprechenden Zeile höher wird, aber die Höhe der dieser Zeile entsprechenden festen Zelle hat nicht geändert und die Tabelle ist falsch Das hat nichts mit dem Browser zu tun Ant Version ist 2.x.bitte löse es

Die Einstellung der Tabelleneigenschaft table-layout:fixed; width wird wirksam

Die Einstellung der Tabelleneigenschaft table-layout:fixed; width wird wirksam

schick, Mann, schick!!

Die Einstellung der Tabelleneigenschaft table-layout:fixed; width wird wirksam

Du bist der Beste

@zoffyzhang Nur für feste Breite, nicht responsive Breite.

Die Einstellung der Tabelleneigenschaft table-layout:fixed; width wird wirksam

Obwohl es wirksam ist, wird das Feld mit super langem Text immer noch gestreckt, wenn die Spalte fixiert ist

@wulienen umschließt das superlange Feld, nach overflow : hidden können Sie den überschüssigen Teil ignorieren

@wulienen umschließt das superlange Feld, nach overflow : hidden können Sie den überschüssigen Teil ignorieren

Auf diese Weise kann das dynamische Spaltendehnen keine Ellipsenexpansion erreichen. 😂

@wulienen umschließt das superlange Feld, nach overflow : hidden können Sie den überschüssigen Teil ignorieren

Auf diese Weise kann das dynamische Spaltendehnen keine Ellipsenexpansion erreichen. 😂

Die Verwendung dieser Eigenschaft verwirft die dynamische Breite der Komponente selbst. Sie müssen die Breite für jede Spalte festlegen, sonst wird sie gleichmäßig verteilt. Wenn der Text weggelassen werden muss, text-overflow: ellipsis;

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

Ich bin auf das gleiche Problem gestoßen und habe es perfekt gelöst, nachdem ich die Lösungen von xupengkun und yoyo837 kombiniert habe. Vielen Dank für Ihre Bemühungen!

Problemprototyp <br i="8"/> nach Lösung: https://codesandbox.io/s/sg5r2

Keine Lösung, vielschichtige Kinder, mit Checkboxen und super langem Text. in dieser Situation.eher ungelöst

@heavenlian geben Sie eine reproduzierbare Demo und ich werde es für Sie reparieren.

@afc163
Es ist gelöst, schreiben Sie eine Schleifenverschachtelung, geben Sie tr.ant-table-row-level-${i} unter jede Tabelle, berechnen Sie die Abweichungsgröße des erweiterten Symbols darin und legen Sie dann dynamisch die erforderliche Breite des Textes fest. ...

Ich habe es perfekt mit CSS gelöst

Codesandbox-Demo

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

Wie werden Bildlaufleisten automatisch ein- und ausgeblendet?
Sowohl Quer- als auch Hochformat müssen unterstützt werden
https://codesandbox.io/s/currying-river-6n2r5

@ZengTianShengZ Erstaunliche Arbeit!

Dieses Problem ist immer noch vorhanden und sollte wirklich als Teil der Haupttabellenkomponente angegangen werden, anstatt CSS-Hacks anzuwenden. Vielen Dank an alle, die geholfen haben, eine Lösung bereitzustellen, aber die Tabelle sollte Spaltenüberschriften standardmäßig korrekt wiedergeben

https://codesandbox.io/s/sg5r2

Diese von den oben genannten Benutzern bereitgestellte Lösung funktioniert einwandfrei.
Das einzige Problem ist, dass Sie die Breite für jede Spalte angeben müssen.
Die Art und Weise, wie die Tabelle wirklich funktionieren sollte, ist

1. Spaltenüberschriften sollten immer am Körper ausgerichtet sein
2. Die Angabe der Breite sollte kein Hack oder obligatorisch sein.
3. Sie können die Breite in Prozent angeben. Basierend darauf wäre es ein % der gesamten Tischbreite oder eine feste Breite, die in Zahlen angegeben wird.
4. Alle anderen Spalten passen sich automatisch basierend auf dem Inhalt des verbleibenden Platzes nach der festen oder prozentualen Breitenverteilung an.

Überprüfen Sie http://w2ui.com/web/demos/#!grid/grid -23 als Referenz.
Dies ist ein ziemlich mächtiges Raster, leider reagiert reines JS nicht. Aber das alles funktioniert erstaunlich gut.

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

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

js-Code:
konstante Spalten = [
{
Titel: 'guterName',
Schlüssel: 'guterName',
dataIndex: 'goodName',
im Zentrum anordnen',
Breite: 150,
behoben: 'links',
render: (item) => (item || item == 0 ? ( ) : ( -- ))}];CSS-Code:.textOverflow{Leerzeichen: nowrap!important;Überlauf: versteckt! wichtig;Textüberlauf: Ellipse!Wichtig;}.maxWidth118{maximale Breite: 118px;}Verwenden Sie eine dumme Methode, fügen Sie ein Etikett in das Rendering ein, legen Sie den Stil für das Etikett fest, zeigen Sie die Auslassungspunkte zu lange an und fügen Sie das Titelattribut hinzu

Pull Request gesendet: #17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead tr {
Anzeige: Flex;
}
.ant-table-thead th {
Biegung: 1;
}
.ant-Tabellenzeile {
Anzeige: Flex;
}
.ant-Tabellenzeile td {
Biegung: 1;
Überlauf: automatisch;
}
.ant-Tabellenzeile td::-webkit-scrollbar {
Anzeige: keine;
}
.Säulen {
Anzeige: Flex;
Ausrichtungselemente: Mitte;
Breite: 0;
}

Das funktioniert, macht aber alle Spalten gleich breit. Sie möchten wirklich, dass die Breite jeder Spalte basierend auf dem Inhalt dynamisch ist.

Wie man die prozentuale Breite in den Spalteneinstellungen einstellt, scheint nicht zu funktionieren.

Nachdem die feste Spalte implementiert wurde, unterstützt die Breite der festen Spalte den Prozentsatz. Was ist die Situation? Wird der Prozentsatz nicht unterstützt?

Unterstützt von @jane-xxx, wenn Sie Fragen haben, können Sie mir eine Codesandbox senden, um Ihnen bei der Anpassung zu helfen.

Breite: 150, Breite Set Nummerntyp. Saite, keine Wirkung.

HI, ich bin von antd 3 auf 4 migriert und habe ein Problem in der Tabelle, anfangs in und 3 war die Tabellenbreite die Breite der übergeordneten Elemente, aber jetzt scheint es, dass sich die Breite an den Inhalt in der Tabelle anpasst, die ich durchlaufen habe der Doc, ich kann nichts finden, um mein Problem zu lösen. Ich werde das Bild der Tabelle aus beiden Versionen als Referenz anhängen.

HI, ich bin von antd 3 auf 4 migriert und habe ein Problem in der Tabelle, anfangs in und 3 war die Tabellenbreite die Breite der übergeordneten Elemente, aber jetzt scheint es, dass sich die Breite an den Inhalt in der Tabelle anpasst, die ich durchlaufen habe der Doc, ich kann nichts finden, um mein Problem zu lösen. Ich werde das Bild der Tabelle aus beiden Versionen als Referenz anhängen.

vielleicht hilft set tableLayout="fixed".

Sehr kurze Inhalte führen auch dazu, dass die Breiteneinstellung fehlschlägt.~

Bitte sagen Sie mir, wie ich mit der obigen Situation umgehen soll?

Geben Sie die Demo an, deren Breite ebenfalls falsch ausgerichtet ist, und öffnen Sie sie erneut.

Sehr kurze Inhalte führen auch dazu, dass die Breiteneinstellung fehlschlägt.~

Das Problem von superlangen fortlaufenden Feldern (lange Zahlen und lange Wörter) , die das Layout der Tabelle zerstören ( selbst wenn Sie die Breite der Spalte angeben, wird herausgedrückt ), bevor die Komponente standardmäßig word-break: break-word; hinzufügt, um zu korrigieren solches Layout und verursacht das Problem in #13624. ( Bildschirmfoto )

Die beste Lösung ist also wahrscheinlich, das Wort nicht standardmäßig umzubrechen, sondern eine Eigenschaft bereitzustellen, um Zeilen für bestimmte Spalten umzubrechen.

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

Funktioniert auch mit #5753, Unterstützung

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

Beachten Sie, dass Sie vor 3.24.0 einen Unterbrechungsstil für die Spalten von superlangen Feldern hinzufügen müssen:

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

In 3.24.0 wurde das Problem, dass die Spaltenausrichtung durch das superlange Feld zerstört wird, behoben und die Auslassungsfunktion hinzugefügt.Für die spezifische API siehe: #17284

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

Es tut mir leid, aber ich habe ein ähnliches Problem nach der Migration von 3.x auf 4.x.
Meine Tabelle sieht unter 4.x so aus:

Während es in 3.x gut aussieht:

Ich kann das Problem immer noch nicht in einer vereinfachten Codesandbox reproduzieren. Aber in der Zwischenzeit würde ich mich über jede Hilfe auf Englisch freuen.

Danke schön!

Es tut mir leid, aber ich habe ein ähnliches Problem nach der Migration von 3.x auf 4.x.
Meine Tabelle sieht unter 4.x so aus:

Während es in 3.x gut aussieht:

Ich kann das Problem immer noch nicht in einer vereinfachten Codesandbox reproduzieren. Aber in der Zwischenzeit würde ich mich über jede Hilfe auf Englisch freuen.

Danke schön!

Hast du die Spaltenbreite eingestellt?
Wenn Sie die Spaltenbreite bereits festgelegt haben, versuchen Sie dies bitte. Diese Methode funktioniert bei mir

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

Dies wurde in einem aktuellen Update behoben.

So lösen Sie die vertikale weiße Lücke beim horizontalen Ziehen

So lösen Sie die vertikale weiße Lücke beim horizontalen Ziehen

Lassen Sie einige nicht feste Spalten und fixieren Sie die Breite nicht, machen Sie sie adaptiv