Ant-design: 😨セルに3.11.3以降の長い数字または長い単語が含まれていると、テーブルの配置が壊れます

あなたの場合、固定幅を追加すると解決します

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

コンポーネントがデフォルトでword-break: break-word;を追加して修正する前に、非常に長い連続フィールド（長い数値と長い単語）がテーブルのレイアウトを破壊する問題（列の幅を指定した場合でも）そのようなレイアウト、およびhttps://github.com/ant-design/ant-design/issues/13624で問題が発生します。 （スクリーンショット）

したがって、最善の解決策は、おそらくデフォルトのブレークワードではなく、特定の列の行をブレークするプロパティを提供することです。

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

https://github.com/ant-design/ant-design/issues/5753、supportでそれを行うこともできます

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

3.24.0より前では、超長フィールドの列にブレークスタイルを追加する必要があることに注意してください。

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

3.24.0では、超長フィールドの列の配置が破壊される問題が解決され、省略関数が追加されました。特定のAPIについては、 https ：//github.com/ant-design/antを参照してください。

@ lidianhao123私のテーブルはすべて固定幅で、複製リンクのテーブルは書き込みなしで複製できるので、書き込みはしませんでした。

@ yoyo837幅を書いて例を修正する必要がありますが、この状況は本当に書く必要があります。先ほど申し上げたように、上記の状況ではないようです。

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

幅もずれているデモを提供し、再度開きます。

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

@ yoyo837 Bingo！はhttps://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241の問題です。

同じ問題、それを解決する方法は？

ただし、この変更は重大な変更とは見なされず、3.10.10バージョンにのみロールバックできるようになりました。そうしないと、設定された幅が有効にならず、設定によって幅が制限されるページが多数あります。幅。

@vxzhongは最初に自分でしか補うことができません

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

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

次に、各列の列幅を指定してみてください。https：//github.com/ant-design/ant-design/issues/17051#issuecomment-501280017 。
通常どおりantdアップグレードし、マージ後にソリューションを削除します。

この問題はまだ解決されていません...

また、問題があります。テーブル作成時、テーブルセル内のテキストは「status」などの列挙値です。このとき、セルの幅が設定されており、セルは折りたたまれておらず、次に、要求に応じて中国語でレンダリングされます。「全体的な出力ステータス」、この時点でセルが折りたたまれているため、このセルに対応する行の高さが高くなりますが、この行に対応する固定セルの高さは変更されておらず、テーブルが間違っています。これはブラウザとは関係ありません。antバージョンは2.xです。解決してください

テーブルプロパティの設定table-layout:fixed; widthが有効になります

テーブルプロパティの設定table-layout:fixed; widthが有効になります

ファンシー、マン、ファンシー!!

テーブルプロパティの設定table-layout:fixed; widthが有効になります

君は最高だ

@zoffyzhang固定幅の場合のみ、レスポンシブ幅ではありません。

テーブルプロパティの設定table-layout:fixed; widthが有効になります

有効になりますが、列が固定されている場合、テキストが非常に長いフィールドは引き続き引き伸ばされます

@wulienenは超長いフィールドをラップしますoverflow : hiddenの後は、余分な部分を無視できます。

@wulienenは超長いフィールドをラップしますoverflow : hiddenの後は、余分な部分を無視できます。

このように、カラムの動的ストレッチは省略記号の拡張を実現できません。 😂

@wulienenは超長いフィールドをラップしますoverflow : hiddenの後は、余分な部分を無視できます。

このように、カラムの動的ストレッチは省略記号の拡張を実現できません。 😂

このプロパティを使用すると、コンポーネント自体の動的な幅が破棄されます。各列の幅を設定する必要があります。そうしないと、均等に分散されます。テキストを省略する必要がある場合は、 text-overflow: ellipsis;

.ant-table-tbody> tr> td {
空白：nowrap;
}
.ant-table-thead> tr> th {
空白：nowrap;
}

私は同じ問題に遭遇し、 xupengkunとyoyo837のソリューションを組み合わせた後、それを完全に解決しました。あなたの努力に感謝します！

解決後の問題のプロトタイプ<bri = "8" />：https://codesandbox.io/s/sg5r2

チェックボックスと非常に長いテキストを備えた、解決策はありません。この状況で。もっと未解決

@heavenlianは再現可能なデモを提供し、修正します。

@ afc163
これが解決され、ループネストが作成され、各テーブルの下にtr.ant-table-row-level- $ {i}が指定され、内部の展開されたアイコンの偏差サイズが計算され、テキストの必要な幅が動的に設定されます。 ..。

私はcssでそれを完全に解決しました

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完璧です。

スクロールバーを自動的に表示および非表示にするにはどうすればよいですか？
横向きと縦向きの両方をサポートする必要があります
https://codesandbox.io/s/currying-river-6n2r5

@ZengTianShengZ素晴らしい仕事です！

この問題はまだ存在しており、CSSハックを適用するのではなく、メインテーブルコンポーネントの一部として実際に対処する必要があります。 修正を提供してくれたすべての人に感謝しますが、テーブルはデフォルトで列ヘッダーを正しくレンダリングする必要があります

https://codesandbox.io/s/sg5r2

上記のユーザーが提供するこのソリューションは完全に機能します。
唯一の問題は、すべての列に幅を指定する必要があることです。
テーブルが実際に機能する方法は

1. 列ヘッダーは常に本文と整列する必要があります
2. 幅の指定は、ハックや必須ではありません。
3. パーセンテージで幅を指定できます。 これに基づいて、テーブルの合計幅または数値で指定された固定幅の％になります。
4. 他のすべての列は、固定または％幅の分布の後に残っているスペースのコンテンツに基づいて自動的に調整されます。

http://w2ui.com/web/demos/#!grid/grid-23を参照してください。
これは、純粋なJSが反応しないための非常に強力なグリッドです。 しかし、これはすべて驚くほどうまくいきます。

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

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

jsコード：
const columns = [
{{
タイトル： 'goodName'、
キー： 'goodName'、
dataIndex： 'goodName'、
整列： '中央'、
幅：150、
修正済み： '左'、
レンダリング:(アイテム）=>（アイテム||アイテム== 0？（ ）：（ - ））}];cssコード：.textOverflow {空白：nowrap！important;オーバーフロー：hidden！important;テキストオーバーフロー：省略記号！重要;}.maxWidth118 {最大幅：118px;}愚かな方法を使用して、レンダリングにラベルを配置し、ラベルのスタイルを設定し、省略記号を長すぎて表示し、タイトル属性を追加します

送信されたプルリクエスト：＃17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead tr {
表示：フレックス;
}
.ant-table-thead th {
フレックス：1;
}
.ant-table-row {
表示：フレックス;
}
.ant-table-row td {
フレックス：1;
オーバーフロー：自動;
}
.ant-table-row td ::-webkit-scrollbar {
表示：なし;
}
.columns {
表示：フレックス;
align-items：center;
幅：0;
}

これは機能しますが、すべての列が同じ幅になります。 実際には、各列の幅をコンテンツに基づいて動的にする必要があります。

列設定でパーセント幅を設定する方法は、機能しないようです。

固定列が実装された後、固定列の幅はパーセンテージをサポートします。状況はどうですか？パーセンテージをサポートしませんか？

@ jane-xxxでサポートされています。ご不明な点がございましたら、コードサンドボックスを送信して調整してください。

幅：150、幅セット番号タイプ。 文字列、効果なし。

こんにちは、antd 3から4に移行しましたが、テーブルで問題が発生しています。最初は3で、テーブルの幅は親要素の幅でしたが、現在はテーブルのコンテンツに合わせて幅が調整されているようです。ドキュメント、問題を解決するものが見つかりません。 参考までに両バージョンの表の画像を添付します。

こんにちは、antd 3から4に移行しましたが、テーブルで問題が発生しています。最初は3で、テーブルの幅は親要素の幅でしたが、現在はテーブルのコンテンツに合わせて幅が調整されているようです。ドキュメント、問題を解決するものが見つかりません。 参考までに両バージョンの表の画像を添付します。

たぶんsettableLayout = "fixed"が役立つでしょう

コンテンツが非常に短いと、幅の設定も失敗します。〜

上記の状況に対処する方法を教えてください。

幅もずれているデモを提供し、再度開きます。

コンテンツが非常に短いと、幅の設定も失敗します。〜

コンポーネントがデフォルトでword-break: break-word;を追加して修正する前に、非常に長い連続フィールド（長い数値と長い単語）がテーブルのレイアウトを破壊する問題（列の幅を指定した場合でも）そのようなレイアウト、および＃13624で問題が発生します。 （スクリーンショット）

したがって、最善の解決策は、おそらくデフォルトのブレークワードではなく、特定の列の行をブレークするプロパティを提供することです。

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

＃5753でも動作し、サポート

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

3.24.0より前では、超長フィールドの列にブレークスタイルを追加する必要があることに注意してください。

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

3.24.0では、超ロングフィールドによって列の配置が破壊される問題が解決され、省略関数が追加されました。特定のAPIについては、＃17284を参照してください。

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

申し訳ありませんが、3.xから4.xに移行した後、同様の問題が発生しています。
私のテーブルは4.xでは次のようになります。

3.xでは問題ないように見えますが：

簡略化されたCodesandboxで問題を再現することはまだできません。 それまでの間、英語でお役に立てれば幸いです。

ありがとう！

申し訳ありませんが、3.xから4.xに移行した後、同様の問題が発生しています。
私のテーブルは4.xでは次のようになります。

3.xでは問題ないように見えますが：

簡略化されたCodesandboxで問題を再現することはまだできません。 それまでの間、英語でお役に立てれば幸いです。

ありがとう！

列幅を設定しましたか？
すでに列幅を設定している場合は、これを試してください。 この方法は私のために働きます

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

これは最近のアップデートで修正されています。

水平方向にドラッグするときの垂直方向の白いギャップを解決する方法

水平方向にドラッグするときの垂直方向の白いギャップを解決する方法

固定されていない列をいくつか残し、幅を固定せず、適応性を持たせる