📜  如何在 Chrome 中创建粘性表格标题?

📅  最后修改于: 2021-08-31 07:13:48             🧑  作者: Mango

当您向下滚动表格时,表格的标题保持固定在屏幕顶部,称为粘性表格标题。当原始标题从视图中丢失时,它们用于帮助查看器了解列中数据的用途。它消除了上下滚动表格以获取正在读取的数据的引用的不便。在这里,我们将看到如何在表格中创建粘性表格标题。

方法:方法是将位置属性设置为表格标题上的粘性,以便在向下滚动表格时保持固定在顶部。

例子:



  

    
        How to create sticky table 
        headers In Chrome?
    
      
    

  

    

        Below is a table which has          sticky table headers     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
CHARACTERENCODED FORM
backspace%08
tab%09
linefeed%0A
c return%0D
space%20
!%21
%22
#%23
$%24
%%25
&%26
%27
(%28
)%29
*%2A
+%2B
,%2C
%2D
.%2E
/%2F
0%30
1%31
2%32
3%33
4%34
5%35
6%36
7%37
8%38
9%39
  

输出:

解释:
position:sticky属性用于使表头相对于表体固定。请记住粘性不适用于 或 标签,但可以与 一起使用。因此,我们将 的位置设置为粘性并将其设置为深色背景颜色,否则在向下滚动时透明度会使表格的其他数据在标题后面可见。 top 属性设置为 0 使标题固定在顶部。