sticky时表头和内容列的竖线不对齐
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Accessibilité débutants
- 35/100
- Type d'issue
- Bug
- Clarté
- À clarifier
- Activité
- À l'abandon
- Stack technique
- react, typescript
- Domaine
- frontend
Piste de recherche
Commencez par reproduire l’exemple de Table sticky signalé avec les colonnes et les données fournies, tableLayout="auto", sticky et les paramètres de défilement horizontal à différentes tailles et résolutions de navigateur. Suivez les limites de l’en-tête sticky et des colonnes de contenu, puis vérifiez que les lignes verticales restent alignées dans le scénario reproduit.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐
代码
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,
}}
/>
在文档示例中偏差没那么明显,在业务项目中列的数量更多,还有其他计算,偏差更大
请问有什么思路解决吗
- Langage dominant
- TypeScript
- Étoiles
- 1.4k
- Forks
- 618
- Merge moyen
- 10 h 19 min
- PR mergées (30 j)
- 2
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de react-component/table
-
Difficulté 4/5 3-5 jours Accessibilité débutants 42/100
react-component/table#1507 ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 50/100
react-component/table#1416 ·
-
Difficulté 5/5 Plus d'une semaine Accessibilité débutants 30/100
react-component/table#1403 ·
-
Difficulté 5/5 Plus d'une semaine Accessibilité débutants 15/100
react-component/table#1269 · 1 commentaire ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 35/100
react-component/table#1257 · 1 réaction ·
Toutes les issues de react-component/table
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 70/100
-
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
mksglu/context-mode#1200 ·
-
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
anthropics/claude-code#96687 ·
-
good first issue
Difficulté 1/5 Moins d'une heure Accessibilité débutants 95/100
AOSSIE-Org/DebateAI#582 · 2 commentaires ·