gpt4 book ai didi

html - 如何使用 CSS 粘性

转载 作者:行者123 更新时间:2023-11-28 00:11:23 25 4
gpt4 key购买 nike

我创建了一个简单的表格,顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码?

谢谢

<!DOCTYPE html>
<HTML><HEAD></HEAD><BODY>
<P>HELLO<P>

<TABLE BORDER=1 STYLE="border: 3px solid #4285F4;background-color:#EEEEEE;width:1600px;">
<thead STYLE="position: sticky; top:0;">
<TR style="border:0px solid #888888;">
<TH STYLE="height:200px;width:800px;">hello 5</TH><TH STYLE="width:800px;">hello 5</TH>
</TR>
</thead>

<TR style="">
<TD STYLE="height:200px;">hello 5</TD><TD>hello 5</TD></TR>
</TABLE>

HELLO TEXT 1

<TABLE BORDER=1 STYLE="position: sticky; top: 0;border-collapse: collapse;border: 3px solid #4285F4;background-color:#EEEEEE;">
<TR style="border:0px solid #888888;">
<TD STYLE="height:200px;">hello 5</TD><TD>hello 5</TD>
</TR>
<TR style="">
<TD STYLE="height:200px;">hello 5</TD><TD>hello 5</TD></TR>
</TABLE>

<DIV STYLE="width:1600px;">
HELLO TEXT 3... HELLO TEXT 3... HELLO TEXT 3... HELLO TEXT 3... HELLO TEXT 3... HELLO TEXT 3...
</DIV>

</BODY></HTML>

最佳答案

这应该有效。尽量将 css 和 html 保存在单独的文件中,以便您的代码更易于阅读。

tr {
position:sticky;
top:0;
}

关于html - 如何使用 CSS 粘性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55378968/

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