Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

sticky时表头和内容列的竖线不对齐

Offen
#995 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

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

在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐

image
代码

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

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-component/table

Alle Issues in react-component/table

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.