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

[BUG] table在特定场景下宽度会超出父级宽度 #2536

Open
1 task done
xmsz-stu opened this issue Oct 17, 2024 · 0 comments
Open
1 task done

[BUG] table在特定场景下宽度会超出父级宽度 #2536

xmsz-stu opened this issue Oct 17, 2024 · 0 comments

Comments

@xmsz-stu
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

Table

Semi Version

2.67.1

Current Behavior

const TableComp = () => {
  return <Table><Table.Column /><Table.Column width={70} /><Table.Column width={60} /></Table>
}
const A = withField(TableComp)
reurn <A/>

在部分情况下,用户反馈会有这样的情况

134_1729076162.mp4

tableBody的宽度一直在增加,没看源码不确定什么原因,大概推测

  • 第一个Column没设置宽度,在计算总宽度的时候,一瞬间第一个Column的宽度是不固定的

现在临时的办法就是,给field的semi-form-field-main设置overflow,因为field本身是flex,semi-form-field-main默认设置的是width:100%会被子元素撑开;设置overflow使其不让子元素撑开,这样子元素的宽度就被限制了,column的宽度也不会超出
但这样解决很不好

所以还有其他解决办法吗?

我们不给第一个column设置宽度是因为,第一个是标题,希望是占据剩余所有空间,因为表格宽度随屏幕宽度会有变化,不能固定

Expected Behavior

No response

Steps To Reproduce

No response

ReproducibleCode

No response

Environment

- OS:
- browser:

Anything else?

No response

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