gpt4 book ai didi

html - 仅使用 CSS 使第一列在 react 表中变粘

转载 作者:行者123 更新时间:2023-12-01 21:47:29 24 4
gpt4 key购买 nike

我正在尝试将 react 表的第一列呈现为粘性。尽管每行的第一个单元格并不像预期的那样真正粘稠,但它几乎可以正常工作。这是有问题的 codesandBox 工作示例代码。 https://codesandbox.io/embed/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark .在此代码中,当我水平滚动时,第一列中的第一个标题是粘性的,但第一列中标题的其余部分不是粘性的,即使它们具有相同的 CSS 样式。

这个问题可能是重复的,但我正在寻找不需要 jQuery 的解决方案,因为我只想使用 CSS。而且我也不想使用其他问题中提到的任何其他位置,如绝对或相对。

如果有人能帮我解决这个问题,那就太好了!

最佳答案

经过几个小时的折腾,问题出在 tr 的父元素 tbody 上的溢出属性。一旦我从 tbody 本身删除溢出属性,它就会工作并且第 1 列是粘性的。

不过,一旦我从 tbody 样式中删除溢出,第一列就会变粘,但出现的另一个问题是第一个标题行不再粘,因为没有给出溢出样式。但是我制作第一排贴纸很容易,只有位置粘性。

解决方案:

对于任何使用 React 表并希望在没有包和 jQuery 的情况下使第一列和第一个标题更具粘性的人,只有 CSS

https://codesandbox.io/s/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark

关于html - 仅使用 CSS 使第一列在 react 表中变粘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60157144/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com