tdesign-common
tdesign-common copied to clipboard
fix(table): fix CSS for ellipsis truncation, filter icon clipping, and center alignment
🤔 这个 PR 的性质是?
- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [x] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他
🔗 相关 Issue
N/A
💡 需求背景和解决方案
修复表格组件三个 CSS 布局问题:
-
文本省略失效:
.t-table__cell--title .t-table__ellipsis添加flex: 1和min-width: 0,使文本在 flex 容器中能正确截断 -
过滤图标被裁剪:
.t-table__filter-icon-wrap移除固定width,添加flex-shrink: 0,防止图标在空间不足时被压缩 -
居中对齐不准确:
.t-align-center中将justify-content: space-around改为center,并为.t-table__cell--title添加max-width: 100%约束
📝 更新日志
-
fix(table): 修复表头文本省略、过滤图标裁剪及居中对齐问题
-
[ ] 本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供
Original prompt
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% 约束
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.