sticky时表头和内容列的竖线不对齐
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
まず、提供された列とデータ、tableLayout="auto"、sticky、および異なるブラウザーサイズと解像度での水平スクロール設定を使用して、報告された sticky Table の例を再現します。sticky ヘッダーとコンテンツ列の境界を追跡し、再現したシナリオで垂直線が揃ったままであることを確認します。
索引モデルが issue の本文から書いたものです。
説明
在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐
代码
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
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/table のほかの issue
-
難易度 4/5 3〜5日 初心者へのやさしさ 42/100
react-component/table#1507 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 50/100
react-component/table#1416 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 30/100
react-component/table#1403 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 15/100
react-component/table#1269 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
react-component/table#1257 · リアクション 1 件 ·
react-component/table の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
mksglu/context-mode#1200 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
anthropics/claude-code#96687 ·
-
good first issue
難易度 1/5 1時間未満 初心者へのやさしさ 95/100
AOSSIE-Org/DebateAI#582 · コメント 2 件 ·