固定表头列头Javascript代码

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript border
  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4.     <title>固定表头和列</title>
  5.     <style>
  6.         .FixedTitleRow
  7.         {
  8.             position: relative;
  9.             top: expression(this.offsetParent.scrollTop);
  10.             z-index: 10;
  11.             background-color: #E6ECF0;
  12.         }
  13.        
  14.         .FixedTitleColumn
  15.         {
  16.             position: relative;
  17.             left: expression(this.parentElement.offsetParent.scrollLeft);
  18.         }
  19.        
  20.         .FixedDataColumn
  21.         {
  22.             position: relative;
  23.             left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
  24.             background-color: #E6ECF0;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.    <div id="scrollDiv" style="width: 400px; overflow: auto; cursor: default; display: inline;
  30.         position: absolute; height: 200px;">
  31.         <table id='accountTable' width='550' height='230' cellpadding='0' cellspacing='0' border='1'
  32.             style='table-layout: auto' bordercolor='lightgrey'>
  33.             <tbody>
  34.                 <tr class="FixedTitleRow">
  35.                     <td class="FixedTitleColumn">
  36.                         ID0</td>
  37.                     <td class="FixedTitleColumn">
  38.                         CK0</td>
  39.                     <td class="FixedTitleColumn">
  40.                         Code0</td>
  41.                     <td class="FixedTitleColumn">
  42.                         Descirption0</td>
  43.                     <td class="FixedTitleColumn">
  44.                         TOL0</td>
  45.                     <td>
  46.                         XS0</td>
  47.                     <td >
  48.                         SS0</td>
  49.                     <td>
  50.                         MS0</td>
  51.                     <td>
  52.                         DS0</td>
  53.                     <td>
  54.                         BS0</td>
  55.                     <td>
  56.                         XL0</td>
  57.                     <td>
  58.                         ML0</td>
  59.                     <td>
  60.                         DL0</td>
  61.                     <td>
  62.                         EM0</td>
  63.                     <td>
  64.                         BM0</td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td class="FixedDataColumn">
  68.                         88</td>
  69.                     <td class="FixedDataColumn">
  70.                         88</td>
  71.                     <td class="FixedDataColumn">
  72.                         88</td>
  73.                     <td class="FixedDataColumn">
  74.                         88</td>
  75.                     <td class="FixedDataColumn">
  76.                         88</td>
  77.                     <td>
  78.                         22</td>
  79.                     <td>
  80.                         22</td>
  81.                     <td>
  82.                         22</td>
  83.                     <td>
  84.                         22</td>
  85.                     <td>
  86.                         22</td>
  87.                     <td>
  88.                         22</td>
  89.                     <td>
  90.                         22</td>
  91.                     <td>
  92.                         22</td>
  93.                     <td>
  94.                         22</td>
  95.                     <td>
  96.                         22</td>
  97.                 </tr>
  98.                 <tr>
  99.                     <td class="FixedDataColumn">
  100.                         111</td>
  101.                     <td class="FixedDataColumn">
  102.                         111</td>
  103.                     <td class="FixedDataColumn">
  104.                         1111</td>
  105.                     <td class="FixedDataColumn">
  106.                         This is Test</td>
  107.                     <td class="FixedDataColumn">
  108.                         1</td>
  109.                     <td>
  110.                         001</td>
  111.                     <td>
  112.                         002</td>
  113.                     <td>
  114.                         003</td>
  115.                     <td>
  116.                         004</td>
  117.                     <td>
  118.                         005</td>
  119.                     <td>
  120.                         006</td>
  121.                     <td>
  122.                         007</td>
  123.                     <td>
  124.                         008</td>
  125.                     <td>
  126.                         009</td>
  127.                     <td>
  128.                         010</td>
  129.                 </tr>
  130.                 <tr>
  131.                     <td class="FixedDataColumn">
  132.                         111</td>
  133.                     <td class="FixedDataColumn">
  134.                         111</td>
  135.                     <td class="FixedDataColumn">
  136.                         1111</td>
  137.                     <td class="FixedDataColumn">
  138.                         This is Test</td>
  139.                     <td class="FixedDataColumn">
  140.                         1</td>
  141.                     <td>
  142.                         001</td>
  143.                     <td>
  144.                         002</td>
  145.                     <td>
  146.                         003</td>
  147.                     <td>
  148.                         004</td>
  149.                     <td>
  150.                         005</td>
  151.                     <td>
  152.                         006</td>
  153.                     <td>
  154.                         007</td>
  155.                     <td>
  156.                         008</td>
  157.                     <td>
  158.                         009</td>
  159.                     <td>
  160.                         010</td>
  161.                 </tr>
  162.                 <tr>
  163.                     <td class="FixedDataColumn">
  164.                         111</td>
  165.                     <td class="FixedDataColumn">
  166.                         111</td>
  167.                     <td class="FixedDataColumn">
  168.                         1111</td>
  169.                     <td class="FixedDataColumn">
  170.                         This is Test</td>
  171.                     <td class="FixedDataColumn">
  172.                         1</td>
  173.                     <td>
  174.                         001</td>
  175.                     <td>
  176.                         002</td>
  177.                     <td>
  178.                         003</td>
  179.                     <td>
  180.                         004</td>
  181.                     <td>
  182.                         005</td>
  183.                     <td>
  184.                         006</td>
  185.                     <td>
  186.                         007</td>
  187.                     <td>
  188.                         008</td>
  189.                     <td>
  190.                         009</td>
  191.                     <td>
  192.                         010</td>
  193.                 </tr>
  194.                 <tr>
  195.                     <td class="FixedDataColumn">
  196.                         111</td>
  197.                     <td class="FixedDataColumn">
  198.                         111</td>
  199.                     <td class="FixedDataColumn">
  200.                         1111</td>
  201.                     <td class="FixedDataColumn">
  202.                         This is Test</td>
  203.                     <td class="FixedDataColumn">
  204.                         1</td>
  205.                     <td>
  206.                         001</td>
  207.                     <td>
  208.                         002</td>
  209.                     <td>
  210.                         003</td>
  211.                     <td>
  212.                         004</td>
  213.                     <td>
  214.                         005</td>
  215.                     <td>
  216.                         006</td>
  217.                     <td>
  218.                         007</td>
  219.                     <td>
  220.                         008</td>
  221.                     <td>
  222.                         009</td>
  223.                     <td>
  224.                         010</td>
  225.                 </tr>
  226.             </tbody>
  227.         </table>
  228.     </div>
  230. </body>
  231. </html>
bluedusk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js,HTML,表头固定，不用插件。
07-25
纯js和css完成表头的固定冻结。简单的几行代码便可以完成。
自己造轮子之如何用HTML+JS搭建表头/列固定Table
随时准备转行
08-21 3324
手肝HTML+JS的表头/列固定Table组件
js实现表头固定
javaStudentZhang的博客
06-10 7005
思路：一、table用div包裹，设置div的高度和滚动条，二、克隆table的表头，添加到div中，设为浮动，三、表头的top是滚动条的上方距离&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&amp
拖动滚动条，保持表头固定的HTML写法（双滚动条都在最前面版）
baidu_34217927的博客
06-01 3666
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt; &a
js打印时分页，每页都有表头和表尾
woshiweidanxia的专栏
04-30 8986
无标题文档 @media print{ INPUT {display:none} } 每页都有的表头 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容
HTML Table锁定表头（CSS实现）
鞠勇鸿的技术专栏
12-12 7960
css+html实现固定表头 #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/ background: #FF8C00; } #scrollTable table { border
JavaScript固定表头
ylf尘风的博客
05-07 420
最近有个固定表头的需求，在网上找了资料，都不是我想要的效果；根据表格内容自动调整宽度，在查询方法最后加入scroll(viewid,scrollid)；viewid表格所在Id，scrollid容器所在Id 表头固定 #box{ width:100%; height:400px; overflow-y:auto; position:relative; }
js固定表头
小码农大梦想
12-19 956
js固定表头 由于table的表头是js根据后台的数据直接动态拼接的html标签,所以Bootstrap的冻结表头用不了。 css代码片. #fixed_table #fix_tr1{ background: #FFFFFF; } #fixed_table #fix_tr2{ background: #...
js表头固定实现思路汇总
chrisjingu的专栏
09-11 4407
关于表头固定，表内容滚动的实现，本人总结了3中实现思路，具体如下： 思路一 　　当发生滚动事件后，动态复制一份表头，将其放置在原表头的位置，为滚动的容器添加scroll事件，时刻保持复制表头的top=滚动容条的垂直位置($(obj).scrollTop()) 以下为demo代码实现： -CSS 实现 .table { width:240px; }
使用javascript和jQuery实现浮动表头或固定表头的一种方式
zidieq的博客
04-04 874
参考文献：https://blog.csdn.net/huanghanqian/article/details/52668667（主要贡献了浮动表头的实现方法及思路） https://www.cnblogs.com/dujingjie/p/4571943.html（主要贡献了例子的表格代码） 本文只是对第一个参考连接里面的浮动方法稍加修改。我在自己的页面上（使用bootstrap4修饰的表格）没发现有太明显的问题，但是在下面的例子中，如果table设置了border的话，浮动的表头会有点偏差，不知道如何
拖动滚动条，保持表头固定的HTML写法
baidu_34217927的博客
05-31 1359
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt; &lt;/script&gt; &lt;style&gt; .bg{ width:430px; overflow-x: scroll; position: relativ
js固定表头的实现（转）
weixin_34309435的博客
05-18 126
　原文链接：http://www.th7.cn/web/js/201509/121055.shtml    参考链接：http://www.jb51.net/article/102568.htm 写两个表格，一个为表头，另一个为表内容。当表内容数据量比较大时，可以直接在表内容所在的父容器进行滚动。以下为demo代码实现： &lt;table&gt; &lt;thead class="h...
JS+CSS 实现打印分页 每页都有表头和页尾
生活要快乐 - 魏言
08-19 6575
无标题文档@media print{INPUT {display:none}}每页都有的表头表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格
js 固定表头
iteye_19878的博客
11-14 115
/********************************* ** 名称:JQeury实现表格行列冻结 ** ** 作者:杨积江 ** ** 时间:2114年4月16日 ** ** 联系:yangjijiang@sina.cn ** ** 描述:类似Excel中的冻结窗格功能.建议给出表头固定宽度,所有单元格的高度,指定表格宽度; *****************************...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1153
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 449
【代码】博客前端项目学习day03——框架页。
利用jQuery实现表头固定的方法汇总
在开发后台界面时，遇到表格数据量大导致页面拉长的问题，为了提升用户体验，固定表头成为一项重要需求。本文将介绍三种基于jQuery实现的表头固定方法。 首先，我们采用jQuery UI插件来实现这一功能。这种方法利用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值