sticky时表头和内容列的竖线不对齐
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 35/100
- Issue-Typ
- Bug
- Klarheit
- Muss geklärt werden
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- react, typescript
- Bereich
- frontend
Rechercherichtung
Beginne damit, das gemeldete sticky Table-Beispiel mit den bereitgestellten Spalten und Daten, tableLayout="auto", sticky und Einstellungen für horizontales Scrollen bei verschiedenen Browsergrößen und Auflösungen zu reproduzieren. Verfolge die Grenzen des Sticky-Headers und der Inhaltsspalten und überprüfe anschließend, dass die vertikalen Linien im reproduzierten Szenario ausgerichtet bleiben.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐
代码
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,
}}
/>
在文档示例中偏差没那么明显,在业务项目中列的数量更多,还有其他计算,偏差更大
请问有什么思路解决吗
- Vorherrschende Sprache
- TypeScript
- Sterne
- 1.4k
- Forks
- 618
- Ø Merge
- 10 Std. 19 Min.
- Gemergte PRs (30 T.)
- 2
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus react-component/table
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 42/100
react-component/table#1507 ·
-
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 50/100
react-component/table#1416 ·
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 30/100
react-component/table#1403 ·
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 15/100
react-component/table#1269 · 1 Kommentar ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
react-component/table#1257 · 1 Reaktion ·
Alle Issues in react-component/table
Ähnliche Issues
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
-
Crush Offen
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md Offen
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100
ElementsProject/cln-application#167 · 1 Kommentar · 1 Reaktion ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
Quantco/pnpm-licenses#17 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100