fix(table): fix header style misalignment when ellipsis+sorter+filter enabled #6207
+0
−0
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是?
🔗 相关 Issue
💡 需求背景和解决方案
问题描述:当表头同时启用
ellipsis、sorter、filter三个属性时,表头样式错位。居中对齐时文字不会省略,筛选排序的图标也会被裁剪掉。解决方案:修改
packages/common/style/web/components/table/_index.less中的 CSS 样式:.t-table__cell--title .t-table__ellipsis:添加flex: 1和min-width: 0,使文本在 flex 容器中能正确截断.t-table__filter-icon-wrap:移除固定width: @table-icon-size,添加flex-shrink: 0,防止图标在空间不足时被裁剪居中对齐
.t-align-center:将justify-content: space-around改为justify-content: center,并为.t-table__cell--title添加max-width: 100%约束注意:修改位于
packages/common子模块中,需要先提交到 tdesign-common 仓库,然后更新子模块引用。📝 更新日志
tdesign-vue-next
@tdesign-vue-next/chat
@tdesign-vue-next/auto-import-resolver
☑️ 请求合并前的自查清单
Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.