Skip to content

Conversation

@c01dwave
Copy link

@c01dwave c01dwave commented Dec 4, 2025

Description

Fix cell misalignment in NDataTable when using ellipsis.lineClamp on columns.

Closes #7345

Problem

When a column has ellipsis.lineClamp configured, the cells (both th and td) in that column appear taller than cells in other columns, causing visual misalignment.

Root Cause

The .n-ellipsis--line-clamp class uses display: -webkit-inline-box for multi-line text truncation. As an inline-level box, its default vertical-align: baseline causes inconsistent height calculation compared to regular inline elements in adjacent columns.

Solution

Add vertical-align: middle to .n-ellipsis--line-clamp within data-table-th and data-table-td to ensure consistent vertical alignment.

Changes

  • [src/data-table/src/styles/index.cssr.ts]: Added vertical-align: middle style override for .n-ellipsis--line-clamp inside table header and body cells.

@jahnli
Copy link
Collaborator

jahnli commented Dec 4, 2025

Is it possible to add a corresponding changelog to the PR? You can refer to #7343

@jahnli
Copy link
Collaborator

jahnli commented Dec 5, 2025

Thank you for your contribution

@c01dwave
Copy link
Author

c01dwave commented Dec 5, 2025

Thank you for your contribution

I've added changelogs to all my pending PRs (#7349, #7350, #7351, #7352) as well. Ready for review. Thanks!

@jahnli
Copy link
Collaborator

jahnli commented Dec 5, 2025

Okay, we will review it together before the next release, and look forward to a lot of PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

【NDataTable】columns 新增 ellipsis.lineClamp 导致表头错位

2 participants