tdesign-common icon indicating copy to clipboard operation
tdesign-common copied to clipboard

fix(table): fix CSS for ellipsis truncation, filter icon clipping, and center alignment

Open Copilot opened this issue 3 months ago • 1 comments

🤔 这个 PR 的性质是?

  • [ ] 日常 bug 修复
  • [ ] 新特性提交
  • [ ] 文档改进
  • [ ] 演示代码改进
  • [x] 组件样式/交互改进
  • [ ] CI/CD 改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [ ] 测试用例
  • [ ] 分支合并
  • [ ] 其他

🔗 相关 Issue

N/A

💡 需求背景和解决方案

修复表格组件三个 CSS 布局问题:

  • 文本省略失效.t-table__cell--title .t-table__ellipsis 添加 flex: 1min-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.

Copilot avatar Nov 29 '25 02:11 Copilot