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 была решена проблема с разрушением выравнивания столбца сверхдлинного поля и добавлена ​​функция пропуска.Конкретный API см.: https://github.com/ant-design/ant -дизайн/тянуть/17284

@ lidianhao123 Все мои таблицы имеют фиксированную ширину, а таблицы в ссылке «Воспроизведение» можно воспроизвести без записи, поэтому я их не писал.

@yoyo837 Ваш пример следует исправить, написав ширину.Эту ситуацию действительно нужно написать.Кажется, что это не та ситуация, о которой я говорил выше.

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

Дайте демонстрацию, ширина которой также смещена, и снова откройте ее.

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

@yoyo837 Бинго! — это проблема с 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 как обычно и удалите решение после его слияния.

Эта проблема до сих пор не решена...

Так же есть проблема.При создании таблицы текст в ячейке таблицы является значением перечисления,типа "статус".В это время ширина ячейки задана,и ячейка не свернута,и затем он отображается на китайском языке по запросу. «Общий статус вывода», ячейка в это время складывается, в результате чего высота строки, соответствующей этой ячейке, становится выше, но высота фиксированной ячейки, соответствующей этой строке, не менял, а таблица неправильная. Это не имеет отношения к браузеру. Версия муравья 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 Спасибо за ваши усилия!

Прототип проблемы <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;
}

@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-код:
постоянные столбцы = [
{
заголовок: 'доброе имя',
ключ: 'доброе имя',
индекс данных: «хорошее имя»,
выровнять: 'по центру',
ширина: 150,
исправлено: 'левый',
render: (item) => (item || item == 0 ? ( ) : ( -- ))}];css-код:.textOverflow{пустое пространство: nowrap!важно;переполнение: скрыто!важно;переполнение текста: многоточие! важно;}.maxWidth118{максимальная ширина: 118 пикселей;}Глупым методом поместите метку в рендер, задайте стиль для метки, отобразите слишком длинное многоточие и добавьте атрибут title

Запрос на включение отправлен: # 17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead тр {
дисплей: гибкий;
}
.ant-table-thead {
гибкий: 1;
}
.ant-таблица-строка {
дисплей: гибкий;
}
.ant-table-row td {
гибкий: 1;
переполнение: авто;
}
.ant-table-row td::-webkit-scrollbar {
дисплей: нет;
}
.столбцы {
дисплей: гибкий;
выравнивание элементов: по центру;
ширина: 0;
}

Это работает, но делает все столбцы одинаковой ширины. Вы бы действительно хотели, чтобы ширина каждого столбца была динамической в ​​зависимости от содержимого.

как установить ширину в процентах в настройках столбцов, кажется, не работает.

После того, как фиксированный столбец реализован, ширина фиксированного столбца поддерживает процентное соотношение, что происходит, оно не поддерживает процентное соотношение?

При поддержке @jane-xxx, если у вас есть какие-либо вопросы, вы можете отправить мне codeandbox, чтобы помочь вам настроить его.

ширина: 150, ширина Установить числовой тип. строка, никакого эффекта.

Привет, я перешел с antd 3 на 4, и у меня возникла проблема в таблице, изначально в и 3 ширина таблицы была шириной родительского элемента, но теперь кажется, что ширина подстраивается под содержимое в таблице, я прошел документ, я не могу найти ничего, чтобы решить мою проблему. Я прикреплю изображение таблицы из обеих версий для справки.

Привет, я перешел с antd 3 на 4, и у меня возникла проблема в таблице, изначально в и 3 ширина таблицы была шириной родительского элемента, но теперь кажется, что ширина подстраивается под содержимое в таблице, я прошел документ, я не могу найти ничего, чтобы решить мою проблему. Я прикреплю изображение таблицы из обеих версий для справки.

возможно, set tableLayout="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 решена проблема, связанная с тем, что выравнивание столбцов нарушается сверхдлинным полем, и добавлена ​​функция пропуска.

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'
 />

Это было исправлено в недавнем обновлении.

Как решить вертикальный белый зазор при перетаскивании по горизонтали

Как решить вертикальный белый зазор при перетаскивании по горизонтали

Оставьте некоторые нефиксированные столбцы и не фиксируйте ширину, сделайте ее адаптивной