Ant-design: 😨 La alineación de la tabla se rompe cuando la celda contiene un número largo o una palabra larga después de 3.11.3

En tu caso, agregar un ancho fijo lo resolverá

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

El problema de los campos continuos súper largos (números largos y palabras largas) que destruyen el diseño de la tabla ( incluso si especifica que el ancho de la columna se exprimirá ), antes de que el componente agregara word-break: break-word; de forma predeterminada para corregir dicho diseño, y Causará un problema en https://github.com/ant-design/ant-design/issues/13624 . ( captura de pantalla )

Por lo tanto, la mejor solución probablemente no sea dividir la palabra por defecto, sino proporcionar una propiedad para dividir líneas para ciertas columnas.

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

También puede hacerlo con https://github.com/ant-design/ant-design/issues/5753 , soporte

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

Tenga en cuenta que antes de la versión 3.24.0, debe agregar un estilo de ruptura para las columnas de los campos superlargos:

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

En 3.24.0, se solucionó el problema de que se destruye la alineación de la columna del campo súper largo y se agregó la función de omisión. Para conocer la API específica, consulte: https://github.com/ant-design/ant -diseño/extracción/17284

@lidianhao123 Todas mis tablas tienen un ancho fijo, y las del enlace Reproducción se pueden reproducir sin escribir, así que no las escribí.

@ yoyo837 Su ejemplo debe corregirse escribiendo el ancho. Esta situación realmente necesita ser escrita. Parece que no es la situación anterior como dije.

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

Dé la demostración cuyo ancho también está desalineado y vuelva a abrirla.

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

@yoyo837 ¡Bingo! es un problema con https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241 .

El mismo problema, ¿cómo solucionarlo?

Sin embargo, ahora este cambio no se considera un cambio importante, y ahora solo se puede revertir a la versión 3.10.10; de lo contrario, el ancho establecido no tendrá efecto, y hay una gran cantidad de páginas que limitan el ancho configurando la anchura.

@vxzhong solo puede inventarlo solo primero

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

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

Luego intente especificar el ancho de columna para cada columna y https://github.com/ant-design/ant-design/issues/17051#issuecomment-501280017 .
Actualice antd normalmente y elimine la solución después de fusionarla.

Este problema aún no ha sido resuelto...

También hay un problema. Cuando se crea la tabla, el texto en la celda de la tabla es un valor de enumeración, como 'estado'. En este momento, el ancho de la celda se ha establecido y la celda no está doblada, y luego se presenta en chino a pedido.' El estado de salida general', la celda se pliega en este momento, lo que hace que la altura de la fila correspondiente a esta celda sea más alta, pero la altura de la celda fija correspondiente a esta fila tiene no ha cambiado, y la tabla está mal. Esto no tiene nada que ver con el navegador. La versión ant es 2.x.por favor resuélvelo

Establecer la propiedad de la tabla table-layout:fixed; ancho tendrá efecto

Establecer la propiedad de la tabla table-layout:fixed; ancho tendrá efecto

elegante, hombre, elegante!!

Establecer la propiedad de la tabla table-layout:fixed; ancho tendrá efecto

eres el mejor

@zoffyzhang Solo para ancho fijo, no ancho de respuesta.

Establecer la propiedad de la tabla table-layout:fixed; ancho tendrá efecto

Aunque surte efecto, si la columna es fija, el campo con texto superlargo seguirá alargado

@wulienen envuelve el campo súper largo, después overflow : hidden puede ignorar la parte sobrante

@wulienen envuelve el campo súper largo, después overflow : hidden puede ignorar la parte sobrante

De esta manera, el estiramiento dinámico de la columna no puede lograr la expansión de elipsis. 😂

@wulienen envuelve el campo súper largo, después overflow : hidden puede ignorar la parte sobrante

De esta manera, el estiramiento dinámico de la columna no puede lograr la expansión de elipsis. 😂

El uso de esta propiedad descartará el ancho dinámico del componente en sí. Debe establecer el ancho para cada columna, de lo contrario, se distribuirá uniformemente. Si es necesario omitir el texto, text-overflow: ellipsis;

.ant-table-tbody > tr > td {
espacios en blanco: nowrap;
}
.ant-table-thead > tr > th{
espacios en blanco: nowrap;
}

Encontré el mismo problema y lo resolví perfectamente después de combinar las soluciones de xupengkun y yoyo837 ¡ Gracias por sus esfuerzos!

Prototipo del problema <br i="8"/> después de resolverlo: https://codesandbox.io/s/sg5r2

Sin solución, niños de varias capas, con casillas de verificación y texto súper largo. en esta situación.más sin resolver

@heavenlian da una demostración reproducible y la arreglaré por ti.

@afc163
Está resuelto, escriba un nido de bucle, proporcione tr.ant-table-row-level-${i} debajo de cada tabla, calcule el tamaño de desviación del ícono expandido en el interior y luego establezca dinámicamente el ancho requerido del texto. ...

Lo resolvi perfectamente con css

demostración de 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 perfecto.

¿Cómo mostrar y ocultar automáticamente las barras de desplazamiento?
Tanto el paisaje como el retrato deben ser compatibles
https://codesandbox.io/s/currying-river-6n2r5

@ZengTianShengZ ¡Increíble trabajo!

Este problema aún está presente y realmente debería abordarse como parte del componente de la tabla principal, en lugar de aplicar modificaciones de CSS. Gracias a todos los que ayudaron a proporcionar una solución, pero la tabla debería representar correctamente los encabezados de las columnas de forma predeterminada.

https://codesandbox.io/s/sg5r2

Esta solución proporcionada por los usuarios anteriores funciona perfectamente.
El único problema es que debe especificar el ancho para cada columna.
La forma en que la tabla realmente debería funcionar es

1. Los encabezados de columna siempre deben alinearse con el cuerpo
2. Especificar el ancho no debería ser un truco ni obligatorio.
3. Puede especificar el ancho en números de porcentaje. Basado en eso, sería un % del ancho total de la mesa o ancho fijo especificado en número.
4. Todas las demás columnas se ajustan automáticamente según el contenido del espacio restante después de la distribución de ancho fijo o %.

Consulte http://w2ui.com/web/demos/#!grid/grid -23 como referencia.
Esta es una cuadrícula bastante poderosa, por desgracia, para JS puro no reacciona. Pero hace todo esto asombrosamente bien.

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

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

codigo js:
columnas constantes = [
{
título: 'buenNombre',
clave: 'buenNombre',
índice de datos: 'buenNombre',
Alinear al centro',
ancho: 150,
fijo: 'izquierda',
renderizar: (elemento) => (elemento || elemento == 0 ? ( ) : ( -- ))}];codigo css:.textOverflow{espacio en blanco: ¡ahora! importante;desbordamiento: ¡oculto! importante;desbordamiento de texto: puntos suspensivos! importante;}.maxWidth118{ancho máximo: 118px;}Usando un método estúpido, coloque una etiqueta en el renderizado, establezca el estilo de la etiqueta, muestre los puntos suspensivos demasiado largos y agregue el atributo de título

Solicitud de extracción enviada: #17284 https://github.com/ant-design/ant-design/pull/18789

.ant-table-thead tr {
pantalla: flexible;
}
.ant-table-thead th {
flexión: 1;
}
.hormiga-tabla-fila {
pantalla: flexible;
}
.hormiga-tabla-fila td {
flexión: 1;
desbordamiento: automático;
}
.ant-table-row td::-webkit-scrollbar {
pantalla: ninguno;
}
.columnas {
pantalla: flexible;
alinear elementos: centro;
ancho: 0;
}

Eso funciona, pero hace que todas las columnas tengan el mismo ancho. Realmente le gustaría que el ancho de cada columna sea dinámico en función del contenido.

cómo establecer el porcentaje de ancho en la Configuración de columnas, parece que no funciona.

Después de implementar la columna fija, el ancho de la columna fija admite el porcentaje. ¿Cuál es la situación? ¿No admite el porcentaje?

Con el apoyo de @ jane-xxx, si tiene alguna pregunta, puede enviarme un código y una caja para ayudarlo a ajustarlo.

ancho: 150, ancho Establecer tipo de número. cadena, sin efecto.

Hola, migré de antd 3 a 4, y estoy experimentando un problema en la tabla, inicialmente en y 3, el ancho de la tabla era el ancho de los elementos principales, pero ahora parece que el ancho se ajusta al contenido de la tabla, he revisado el doc, no puedo encontrar nada para resolver mi problema. Adjuntaré la imagen de la tabla de ambas versiones como referencia.

Hola, migré de antd 3 a 4, y estoy experimentando un problema en la tabla, inicialmente en y 3, el ancho de la tabla era el ancho de los elementos principales, pero ahora parece que el ancho se ajusta al contenido de la tabla, he revisado el doc, no puedo encontrar nada para resolver mi problema. Adjuntaré la imagen de la tabla de ambas versiones como referencia.

tal vez establecer tableLayout="fixed" ayudará

El contenido muy breve también hará que falle la configuración del ancho.~

Por favor, dígame cómo lidiar con la situación anterior.

Dé la demostración cuyo ancho también está desalineado y vuelva a abrirla.

El contenido muy breve también hará que falle la configuración del ancho.~

El problema de los campos continuos súper largos (números largos y palabras largas) que destruyen el diseño de la tabla ( incluso si especifica que el ancho de la columna se exprimirá ), antes de que el componente agregara word-break: break-word; de forma predeterminada para corregir dicho diseño, y Causará el problema en #13624. ( captura de pantalla )

Por lo tanto, la mejor solución probablemente no sea dividir la palabra por defecto, sino proporcionar una propiedad para dividir líneas para ciertas columnas.

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

También funciona con #5753, soporte

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

Tenga en cuenta que antes de la versión 3.24.0, debe agregar un estilo de ruptura para las columnas de los campos superlargos:

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

En 3.24.0, se solucionó el problema de que el campo superlargo destruye la alineación de la columna y se agregó la función de omisión. Para conocer la API específica, consulte: #17284

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

Lo siento, pero tengo un problema similar después de migrar de 3.x a 4.x.
Mi tabla se ve así en 4.x:

Si bien se ve bien en 3.x:

Todavía no puedo reproducir el problema en un Codesandbox simplificado. Pero mientras tanto, agradecería cualquier ayuda en inglés.

¡Gracias!

Lo siento, pero tengo un problema similar después de migrar de 3.x a 4.x.
Mi tabla se ve así en 4.x:

Si bien se ve bien en 3.x:

Todavía no puedo reproducir el problema en un Codesandbox simplificado. Pero mientras tanto, agradecería cualquier ayuda en inglés.

¡Gracias!

¿Configuró el ancho de columna?
Si ya ha establecido el ancho de columna, intente esto. este metodo funciona para mi

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

Esto se ha solucionado en una actualización reciente.

Cómo resolver el espacio en blanco vertical al arrastrar horizontalmente

Cómo resolver el espacio en blanco vertical al arrastrar horizontalmente

Deje algunas columnas no fijas y no arregle el ancho, hágalo adaptativo