Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
#995 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
react, typescript
領域
frontend

調査の方向性

まず、提供された列とデータ、tableLayout="auto"、sticky、および異なるブラウザーサイズと解像度での水平スクロール設定を使用して、報告された sticky Table の例を再現します。sticky ヘッダーとコンテンツ列の境界を追跡し、再現したシナリオで垂直線が揃ったままであることを確認します。

索引モデルが issue の本文から書いたものです。

説明

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

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,
    }}
  />

在文档示例中偏差没那么明显,在业务项目中列的数量更多,还有其他计算,偏差更大
请问有什么思路解决吗

主要言語
TypeScript
スター
1.4k
フォーク
618
平均マージ
10時間 19分
マージ済み PR(30日)
2

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react-component/table のほかの issue

react-component/table の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。