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 ، الدعم

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

لاحظ أنه قبل الإصدار 3.24.0 ، تحتاج إلى إضافة نمط فاصل لأعمدة الحقول الطويلة جدًا:

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

في 3.24.0 ، تم حل المشكلة المتمثلة في تدمير محاذاة العمود للحقل الطويل للغاية ، وتمت إضافة وظيفة الحذف. بالنسبة لواجهة برمجة التطبيقات المحددة ، راجع: https://github.com/ant-design/ant -تصميم / سحب / 17284

@ 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 بشكل عادي ، واحذف الحل بعد دمجه.

هذه المشكلة لم تحل بعد ...

توجد مشكلة أيضًا. عند إنشاء الجدول ، يكون النص الموجود في خلية الجدول هو قيمة تعداد ، مثل "الحالة". في هذا الوقت ، تم تعيين عرض الخلية ، ولم يتم طي الخلية ، و ثم يتم تقديمه باللغة الصينية حسب الطلب. "حالة الإخراج الإجمالية" ، يتم طي الخلية في هذا الوقت ، مما يؤدي إلى ارتفاع الصف المقابل لهذه الخلية ، ولكن ارتفاع الخلية الثابتة المقابلة لهذا الصف ولم يتغير الجدول خاطئ .. هذا ليس له علاقة بالمتصفح .. نسخة 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 {
مساحة بيضاء: نوراراب.
}
.ant-table-thead> tr> th {
مساحة بيضاء: نوراراب.
}

لقد واجهت نفس المشكلة وقمت بحلها بشكل مثالي بعد الجمع بين الحلول xupengkun و yoyo837 . شكرا لجهودكم!

النموذج الأولي للمشكلة <br i="8"/> بعد الحل: https://codesandbox.io/s/sg5r2

لا يوجد حل ، متعدد الطبقات للأطفال ، مع مربعات اختيار ونص طويل جدًا. في هذا الوضع.أكثر دون حل

أعطنيheavenlian عرضًا توضيحيًا قابلاً للتكرار وسأصلحه لك.

@ afc163
يتم حلها ، وكتابة عش حلقة ، وإعطاء tr.ant-table-row-level - $ {i} تحت كل جدول ، وحساب حجم الانحراف للأيقونة الموسعة بالداخل ، ثم تعيين العرض المطلوب للنص ديناميكيًا. ...

لقد قمت بحلها بشكل مثالي باستخدام css

كود و صندوق تجريبي

.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;
}

تضمين التغريدة

كيفية إظهار وإخفاء أشرطة التمرير تلقائيًا؟
يجب دعم كل من المناظر الطبيعية والعمودية
https://codesandbox.io/s/currying-river-6n2r5

تضمين التغريدة

لا تزال هذه المشكلة قائمة ويجب حقًا معالجتها كجزء من مكون الجدول الرئيسي ، بدلاً من تطبيق اختراق 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>

شبيبة كود:
أعمدة ثابتة = [
{
العنوان: "goodName" ،
المفتاح: "goodName" ،
فهرس البيانات: "goodName" ،
محاذاة: "مركز" ،
العرض: 150 ،
ثابت: "يسار" ،
تقديم: (item) => (item || item == 0؟ ( ): ( - ))}] ؛كود css:.textOverflow {مسافة بيضاء: الآنراب! مهم ؛تجاوز: مخفي! مهم ؛تجاوز النص: حذف! مهم ؛}.maxWidth118 {أقصى عرض: 118 بكسل ؛}باستخدام طريقة غبية ، ضع تسمية في العرض ، واضبط نمط التسمية ، واعرض علامة القطع لفترة طويلة جدًا ، وأضف سمة العنوان

تم إرسال طلب السحب: # 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 {
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
العرض: 0؛
}

يعمل هذا ، ولكنه يجعل جميع الأعمدة متساوية العرض. تريد حقًا أن يكون عرض كل عمود ديناميكيًا استنادًا إلى المحتوى.

كيفية تعيين عرض النسبة المئوية في إعدادات الأعمدة ، يبدو أنه لا يعمل.

بعد تنفيذ العمود الثابت عرض العمود الثابت يدعم النسبة المئوية ما هو الوضع؟ ألا يدعم النسبة المئوية؟

بدعم من @ jane-xxx ، إذا كان لديك أي أسئلة ، يمكنك إرسال رمز وصندوق إلي لمساعدتك في تعديله.

العرض: 150 ، عرض نوع رقم ضبط. سلسلة ، لا تأثير.

مرحبًا ، لقد انتقلت من antd 3 إلى 4 ، وأواجه مشكلة في الجدول ، في البداية في و 3 كان عرض الجدول هو عرض العناصر الأصلية ، ولكن يبدو الآن أن العرض يتكيف مع المحتوى في الجدول ، لقد مررت المستند ، لا يمكنني العثور على أي شيء لحل مشكلتي. سأرفق صورة الجدول من كلا الإصدارين كمرجع.

مرحبًا ، لقد انتقلت من antd 3 إلى 4 ، وأواجه مشكلة في الجدول ، في البداية في و 3 كان عرض الجدول هو عرض العناصر الأصلية ، ولكن يبدو الآن أن العرض يتكيف مع المحتوى في الجدول ، لقد مررت المستند ، لا يمكنني العثور على أي شيء لحل مشكلتي. سأرفق صورة الجدول من كلا الإصدارين كمرجع.

ربما تعيين tableLayout = "ثابت" سيساعد

سيؤدي المحتوى القصير جدًا أيضًا إلى فشل إعداد العرض

من فضلك قل لي كيف أتعامل مع الوضع أعلاه؟

قم بإعطاء العرض التوضيحي الذي يكون عرضه غير محاذي أيضًا وأعد فتحه.

سيؤدي المحتوى القصير جدًا أيضًا إلى فشل إعداد العرض

مشكلة الحقول المستمرة الطويلة جدًا (الأرقام الطويلة والكلمات الطويلة) التي تؤدي إلى تدمير تخطيط الجدول ( حتى إذا حددت عرض العمود سيتم ضغطه ) ، قبل أن يضيف المكون 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 ، تم حل المشكلة المتمثلة في تدمير محاذاة العمود بواسطة الحقل الطويل للغاية ، وتمت إضافة وظيفة الحذف. بالنسبة لواجهة برمجة التطبيقات المحددة ، راجع: # ​​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'
 />

تم إصلاح هذا في التحديث الأخير.

كيفية حل الفجوة البيضاء العمودية عند السحب أفقيًا

كيفية حل الفجوة البيضاء العمودية عند السحب أفقيًا

اترك بعض الأعمدة غير الثابتة ولا تقم بإصلاح العرض ، اجعلها قابلة للتكيف