【HTML】最簡單的純CSS“position:sticky;”實(shí)現(xiàn)table固定表頭標(biāo)題行
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
利用CSS：position:sticky;，就可以無需其他代碼實(shí)現(xiàn)table固定表頭標(biāo)題行的效果了：
<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>恢復(fù)隱藏</b></td> <td width="5%" nowrap><b>序號</b></td> <td width="40%" nowrap><b>概念和主題</b></td> <td width="40%" nowrap><b>創(chuàng)建時間</b></td> <td width="5%" nowrap><b>天數(shù)</b></td> </tr> ***********其他行次信息************ </table> </div> 注意：必須將此表格放在一個固定高度的div中，并且此div的CSS必須設(shè)置為：overflow:auto;，否則無此效果。 效果： 該文章在 2023/12/13 12:09:55 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
