table表头thead固定
Table 固定 表头
2023-09-11 14:17:27 时间
<html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script> <script type="text/javascript" src="js/jquery.freezeheader.js"></script> <style type="text/css"> table{width: 100%; border-collapse:collapse; text-align: center;} table thead{background-color: #CCCCCC;} table tr td{border:1px solid red; } </style> </head> <body> <table id="mytable"> <thead> <tr> <td>表头1</td> <td>表头2</td> <td>表头3</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td>总计</td> <td>总计</td> </tr> </tfoot> </table> <script> //不要问我为啥js生成,因为一个一个写,难看还慢 for (var i=0; i<20; i++) { $("tbody").append($("tbody tr:first").clone()) } //锁定头部 $("#mytable").freezeHeader({ 'height': '300px' }); </script> </body> </html>
相关文章
- Vue笔记:Vue3 Table导出为Excel
- 固定Table的头部和左边的列-在Knockout Js使用场景下
- 关于table的一些兼容性问题
- jQuery 选择表格(table)里的行和列[转]
- [CSS3] Responsive Table -- no more table
- ABAP check table的工作原理
- where used list repository table WBCROSSGT
- SAP Table function 执行报错 code CX_SQL_EXCEPTION feature not supported 该如何分析
- SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙
- C. Arthur and Table(Codeforces Round #311 (Div. 2) 贪心)
- cowpatty genpmk生成 wpa hash table 使用wifi哈希表 高速破解wifi wpa
- Berkeley DB的数据存储结构——哈希表(Hash Table)、B树(BTree)、队列(Queue)、记录号(Recno)