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 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; 너비를 설정하면 적용됩니다.

테이블 속성 table-layout:fixed; 너비를 설정하면 적용됩니다.

멋져, 멋져!!

테이블 속성 table-layout:fixed; 너비를 설정하면 적용됩니다.

최고야

@zoffyzhang 고정 너비에만 적용되며 반응 너비에는 적용되지 않습니다.

테이블 속성 table-layout:fixed; 너비를 설정하면 적용됩니다.

적용되지만 열이 고정되면 초장 텍스트가 있는 필드는 계속 늘어납니다.

@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

체크박스와 매우 긴 텍스트가 있는 솔루션 없음, 다층적인 childern. 이러한 상황에서.더 많은 미해결

@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,
고정: '왼쪽',
렌더링: (항목) => (항목 || 항목 == 0 ? ( ) : ( -- ))}];CSS 코드:.text오버플로{공백: nowrap!중요;오버플로: 숨김!중요;텍스트 오버플로: 줄임표!중요;}.maxWidth118{최대 너비: 118px;}어리석은 방법을 사용하여 렌더에 레이블을 넣고 레이블의 스타일을 설정하고 줄임표를 너무 길게 표시하고 제목 속성을 추가합니다.

풀 요청 전송: #17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead tr {
디스플레이: 플렉스;
}
.ant-table-thead 일 {
플렉스: 1;
}
.ant-테이블-행 {
디스플레이: 플렉스;
}
.ant-table-row td {
플렉스: 1;
오버플로: 자동;
}
.ant-table-row td::-webkit-scrollbar {
디스플레이: 없음;
}
.열 {
디스플레이: 플렉스;
항목 정렬: 가운데;
너비: 0;
}

그것은 작동하지만 모든 열을 동일한 너비로 만듭니다. 콘텐츠에 따라 각 열의 너비가 동적으로 되기를 원할 것입니다.

열 설정에서 백분율 너비를 설정하는 방법이 작동하지 않는 것 같습니다.

고정 컬럼 구현 후 고정 컬럼의 너비는 퍼센트를 지원하는데 어떤 상황인가요? 퍼센트를 지원하지 않는건가요?

@jane-xxx가 지원하며 질문이 있는 경우 조정하는 데 도움이 되도록 저에게 코드샌드박스를 보낼 수 있습니다.

너비: 150, 너비 숫자 유형을 설정합니다. 문자열, 효과 없음.

안녕하세요, 저는 antd 3에서 4로 마이그레이션했고 테이블에서 문제를 겪고 있습니다. 처음에는 3에서 테이블 너비가 상위 요소 너비였지만 이제는 너비가 테이블의 내용에 맞게 조정되는 것 같습니다. doc, 내 문제를 해결할 수 있는 항목을 찾을 수 없습니다. 참고용으로 두 버전의 테이블 이미지를 첨부하겠습니다.

안녕하세요, 저는 antd 3에서 4로 마이그레이션했고 테이블에서 문제를 겪고 있습니다. 처음에는 3에서 테이블 너비가 상위 요소 너비였지만 이제는 너비가 테이블의 내용에 맞게 조정되는 것 같습니다. doc, 내 문제를 해결할 수 있는 항목을 찾을 수 없습니다. 참고용으로 두 버전의 테이블 이미지를 첨부하겠습니다.

아마도 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에서는 컬럼 정렬이 super-long 필드에 의해 파괴되는 문제가 해결되었고 생략 기능이 추가되었습니다.특정 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'
 />

이것은 최근 업데이트에서 수정되었습니다.

가로로 드래그할 때 세로 흰색 간격을 해결하는 방법

가로로 드래그할 때 세로 흰색 간격을 해결하는 방법

일부 고정되지 않은 열은 그대로 두고 너비를 고정하지 않고 적응형으로 만듭니다.