Как использовать CSS Sticky - PullRequest
Новая
       20

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

0 голосов
/ 27 марта 2019

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

0 голосов
/ 28 марта 2019

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

tr {
position:sticky;
top:0;
}
...