Блог

Главная - Вопросы по программированию - Как использовать CSS sticky

Как использовать CSS sticky

#html #css #position #sticky

#HTML #css #положение #липкий

Вопрос:

Я создал простую таблицу, которая должна иметь липкий заголовок (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>

Комментарии:

1. применить позицию: sticky к таблице tr not

2. Некоторые примечания… не используйте заглавные буквы в вашем HTML, не используйте встроенный CSS и не используйте таблицы для верстки

3. Спасибо за помощь. Я обновил код — все еще безуспешно 🙁

4. Также я обновил код в этом вопросе, так что теперь вы смотрите обновленный код

Ответ №1:

Это должно сработать. Старайтесь хранить css и html в отдельных файлах, чтобы ваш код было легче читать.

 tr {
position:sticky;
top:0;
}