sticky时表头和内容列的竖线不对齐
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 35/100
- Tipo de issue
- Error
- Claridad
- Necesita aclaración
- Estado de actividad
- Estancado
- Stack tecnológico
- react, typescript
- Área
- frontend
Línea de trabajo
Comienza reproduciendo el ejemplo de Table sticky reportado con las columnas y los datos proporcionados, tableLayout="auto", sticky y la configuración de desplazamiento horizontal en diferentes tamaños y resoluciones de navegador. Sigue los límites del encabezado sticky y de las columnas de contenido y, a continuación, verifica que las líneas verticales permanezcan alineadas en el escenario reproducido.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐
代码
const columns: ColumnType<{ a: string; b: string; c: string }>[] = [
{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
{ title: 'title2', dataIndex: 'b', key: 'b', align: 'right' },
{ title: 'title3', dataIndex: 'c', key: 'c', },
{ title: 'title3', dataIndex: 'c1', key: 'c1', },
{ title: 'title3', dataIndex: 'c2', key: 'c2', },
{ title: 'title3', dataIndex: 'c3', key: 'c3', },
{
title: 'Operations',
dataIndex: '',
key: 'd',
fixed: 'right',
render(_, record) {
return (
<a
onClick={e => {
e.preventDefault();
console.log('Operate on:', record);
}}
href="#"
>
Operations
</a>
);
},
},
];
const data = [
{ a: '123', key: '1' },
{ a: 'cdd', b: 'edd', key: '2' },
{ a: '1333', c: 'eee', d: 2, key: '3' },
{ a: '1333', c: 'eee', d: 2, key: '4' },
{ a: '1333', c: 'eee', d: 2, key: '5' },
{ a: '1333', c: 'eee', d: 2, key: '6' },
{ a: '1333', c: 'eee', d: 2, key: '7' },
{ a: '1333', c: 'eee', d: 2, key: '8' },
{ a: '1333', c: 'eee', d: 2, key: '9' },
{ a: '1333', c: 'eee', d: 2, key: '10' },
{ a: '1333', c: 'eee', d: 2, key: '11' },
{ a: '1333', c: 'eee', d: 2, key: '12' },
{ a: '1333', c: 'eee', d: 2, key: '13' },
{ a: '1333', c: 'eee', d: 2, key: '14' },
{ a: '1333', c: 'eee', d: 2, key: '15' },
{ a: '1333', c: 'eee', d: 2, key: '16' },
{ a: '1333', c: 'eee', d: 2, key: '17' },
{ a: '1333', c: 'eee', d: 2, key: '18' },
{ a: '1333', c: 'eee', d: 2, key: '19' },
{ a: '1333', c: 'eee', d: 2, key: '20' },
];
<Table<RecordType>
columns={columns}
data={data}
tableLayout="auto"
sticky
scroll={{
x: 800,
}}
style={{
marginBottom: 100,
}}
/>
在文档示例中偏差没那么明显,在业务项目中列的数量更多,还有其他计算,偏差更大
请问有什么思路解决吗
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.4k
- Forks
- 618
- Merge medio
- 10 h 19 min
- PR fusionados (30 d)
- 2
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de react-component/table
-
Dificultad 4/5 3-5 días Aptitud para principiantes 42/100
react-component/table#1507 ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 50/100
react-component/table#1416 ·
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 30/100
react-component/table#1403 ·
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 15/100
react-component/table#1269 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
react-component/table#1257 · 1 reacción ·
Todos los issues de react-component/table
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
vercel-labs/just-bash#464 ·
-
looksLikeSlug() is ASCII-only, so non-Latin entity slugs (e.g. Korean) skip exact match and collapse Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 90/100
TanStack/tanstack.com#1293 ·