如何冻结表格的标题部分答案

【问题标题】：How to freeze thead section of the table如何冻结表格的标题部分
【发布时间】：2022-03-28 06:28:38
【问题描述】：

我有一个表包含两个标题行Demo。

<thead>
    <tr>
       <th colspan="4"><big>Variable Details</big></th>
    </tr>
    <tr>               
       <th>Variable Name</th>
       <th>Starting Value</th>
       <th>Default Value</th>
       <th>Description</th>
     </tr>
 </thead>

我想冻结前两个标题行（表格的标题部分）。任何想法。

【问题讨论】：

我在您的演示中没有看到任何未冻结的内容。
stackoverflow.com/questions/18826775/…的可能重复
“冻结”是什么意思？
我的意思是前 2 个标题行是固定的，其余行是可滚动的。

标签： javascript jquery html css

【解决方案1】：

在参考了许多网站链接后，我能够使用纯 CSS 修复两个标题行。 Updated fix。

<div id="header-wrap"><b>Variable Details</b>

     <table border=1 cellpadding=0 cellspacing=0 width=100% style="margin-top:5px">

            <thead>
            <tr>            
                  <td  background-color:#E0EBEB;"><b>Variable Name</b></td>
                 <td  background-color:#E0EBEB;"><b>Starting Value</b></td>
                  <td  background-color:#E0EBEB;"><b>Default Value</b></td>
                  <td  background-color:#E0EBEB;"><b>Description</b></td>
            </tr>      
            </thead>
            </table>
</div>

CSS：

#header-wrap { position: fixed; width: 100%; height: 55px; top: 0; text-align:center; background-color:#F0F0F0; margin-top:0px; margin-bottom:40px;}
             td {width:25% }

【讨论】：

【解决方案2】：

将 CSS 属性位置更改为“粘性”以获得粘性表头。见下文。

CSS：

.providers thead { position: sticky; top: 0px; z-index: 10; }

注意：您可能需要根据其他 CSS 属性调整 z-index。

【讨论】：