[Table]`verticalAlign`默认值(或显示声明为`middle`)在部分场景下会失效
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 4.1k
- Forks
- 342
- Avg merge
- 9h 57m
- Merged PRs (30d)
- 12
Description
tdesign 版本
应该是所有版本
重现链接
https://codesandbox.io/p/sandbox/tdesign-react-demo-forked-hz223f?file=%2Fsrc%2Fdemo.tsx%3A31%2C10
重现步骤
直接访问重现即可体验
期望结果
垂直方向居中
实际结果
垂直方向未居中
框架版本
React(1.9.0)
浏览器版本
与浏览器版本无关
系统版本
与系统版本无关
Node版本
与Node版本无关
补充说明
问题描述
根据文档和源码,verticalAlign的默认值为middle,而根据src/table/hooks/useStyle.ts的定义:
verticalAlign !== 'middle' && tableAlignClasses[verticalAlign]
如果开发者:
1、未声明verticalAlign
2、显式声明vertical-align为middle
实际情况下tableClasses都不会增加t-vertical-align-middle类名。
在此前提下,如果项目引入reset.css等重置CSS样式,并且存在如下代码片断:
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
vertical-align: baseline;
}
会导致用户预期的“单元格内容垂直方向居中”效果失效。
补充说明
- 经测试,主流浏览器
<th>、<td>标签默认样式为vertical-align: middle,但根据CSS 2.2,vertical-align默认值为baseline(猜测这是reset.css如此设定的原因)
- 根据Table height algorithms,表格单元格
vertical-align的可选值为baseline(default)、top、bottom、middle(可考虑为verticalAlign的可选项增加baseline)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior using the linked CodeSandbox, then inspect src/table/defaultProps.ts and src/table/hooks/useStyle.ts. Check how the default and explicit middle values affect tableClasses when reset.css sets table-cell alignment to baseline. Done means the documented vertical alignment remains centered in that scenario, with the supported alignment values clarified if needed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100