Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Table]verticalAlign默认值(或显示声明为middle)在部分场景下会失效 #533

Open
syxysszyw opened this issue Sep 13, 2024 · 0 comments

Comments

@syxysszyw
Copy link

syxysszyw commented Sep 13, 2024

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-alignmiddle

实际情况下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.2vertical-align默认值为baseline(猜测这是reset.css如此设定的原因)
image
  • 根据Table height algorithms,表格单元格vertical-align的可选值为baseline(default)、topbottommiddle(可考虑为verticalAlign的可选项增加baseline
image
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

No branches or pull requests

1 participant