sticky时表头和内容列的竖线不对齐
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 35/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Cần làm rõ
- Mức độ hoạt động
- Đình trệ
- Công nghệ
- react, typescript
- Lĩnh vực
- frontend
Hướng nghiên cứu
Bắt đầu bằng cách tái hiện ví dụ Table sticky đã được báo cáo với các cột, dữ liệu được cung cấp, tableLayout="auto", sticky và các thiết lập cuộn ngang ở các kích thước và độ phân giải trình duyệt khác nhau. Theo dõi ranh giới của tiêu đề sticky và các cột nội dung, sau đó xác minh rằng các đường dọc vẫn thẳng hàng trong kịch bản được tái hiện.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
在较高分辨率显示器下,在一些场景下(不同的浏览器宽高),表头竖线和内容竖线不对齐
代码
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,
}}
/>
在文档示例中偏差没那么明显,在业务项目中列的数量更多,还有其他计算,偏差更大
请问有什么思路解决吗
- Ngôn ngữ chính
- TypeScript
- Star
- 1.4k
- Fork
- 618
- Merge trung bình
- 10 giờ 19 phút
- Pull request đã merge (30 ngày)
- 2
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của react-component/table
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 42/100
react-component/table#1507 ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 50/100
react-component/table#1416 ·
-
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 30/100
react-component/table#1403 ·
-
Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 15/100
react-component/table#1269 · 1 bình luận ·
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 35/100
react-component/table#1257 · 1 reaction ·
Tất cả issue của react-component/table
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
vercel-labs/just-bash#464 ·
-
looksLikeSlug() is ASCII-only, so non-Latin entity slugs (e.g. Korean) skip exact match and collapse Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 65/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 65/100
-
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 90/100
TanStack/tanstack.com#1293 ·