【HTML】最简单的纯CSS“position:sticky;”实现table固定表头标题行

admin

2023年12月12日 17:56 本文热度 602

利用CSS：position:sticky;，就可以无需其他代码实现table固定表头标题行的效果了：

<div id="myScrollingDiv" style="border:1px solid #AAAAAA;height:370px;width:100%;overflow:auto;">
<table border="1" bordercolor="#AAAAAA" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="100%" bgcolor="#FFFFFF" align="center" id="show_detail">
  <tr align="center" height="25" bgcolor="#DEDEDE" style="position:sticky;top:0px;font-weight:bold;">
<td width="5%" nowrap><b>隐藏概念</b></td>
<td width="5%" nowrap><b>恢复隐藏</b></td>
<td width="5%" nowrap><b>序号</b></td>
<td width="40%" nowrap><b>概念和主题</b></td>
<td width="40%" nowrap><b>创建时间</b></td>
<td width="5%" nowrap><b>天数</b></td>
  </tr>
***********其他行次信息************
</table>
</div>

注意：必须将此表格放在一个固定高度的div中，并且此div的CSS必须设置为：overflow:auto;，否则无此效果。

效果：

该文章在 2023/12/13 12:09:55 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。