[英]How to freeze thead section of the table
I have a table contains two header rows Demo .我有一个包含两个 header 行的表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>
I want to freeze the top two header rows (thead section of the table).我想冻结前两行 header(表的开头部分)。 Any thoughts.
有什么想法吗。
After referring many web-site links, I am able to fix two header rows using pure CSS. 引用许多网站链接后,我可以使用纯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: 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% }
Change the CSS property position to "sticky" in order to get a sticky table head.将 CSS 属性 position 更改为“粘性”以获得粘性表头。 See below.
见下文。
CSS: CSS:
.providers thead { position: sticky; top: 0px; z-index: 10; }
NOTE: You may have to adjust your z-index depending on your other CSS properties.注意:您可能需要根据其他 CSS 属性调整 z-index。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.