Tencent / Tencent/tdesign

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

Open
#533 0 comments 0 reactions 0 assignees View on GitHub

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.