HTML或JS代码如何实现让一个table的表头不动，body可以自由上下左右滚动，同时保持表头与body的宽度一致？

Posted 2023-04-24

现在将一个table放进一个DIV层里，给DIV设置滚动条，这样的话一拉上下滚动条，表头就看不见了，非常不方便，有没有方法可以让拉滚动条的时候表头不动，只滚动下面的BODY。同时表头与BODY对应列的宽度必须自动保持一致，不能写死宽度。同时我还需要左右滚动条。想了很多方法都不能同时满足以上2个条件，求助高手啊！！！

参考技术A 有意思 参考技术B 可以下载一个supertable的JS-jquery组件看看.
原理是把一个table拆成四个div,简单说就是把滚动的部分悬停固定部分之上.
比如克隆一个表头出来(DIV),然后设置全表的那个DIV上移一个表头高度,这样滚动表体而表头不动.
左右的原理一样.
自己也可以写,不过需要计算好几个DIV的运动关系. 参考技术C 你表头可以独立吗？另做一个DIV放，不是更方便吗？再利用一下滚动条触发事件！

参考资料：http://www.w3school.com.cn/

jquery固定表头或冻结表头的方法

html中经常遇到要把一个table的表头部分冻结，以便浏览时有更好的体验，百度完了大多数的网上解决方案，高级的bootstrap和angularjs中都没有清晰的解决方案，难道就我们中国人需要固定表头或者冻结table表头不成？其实自己写一个也没什么不可，eacherp中就有一个很方便的解决办法，一个函数而已，使用起来比较方便。

javascript代码：

<script>
var container="#grid";
var url="abc.php";
var table_title="序号,生产单号,派工单号,日期,物料id";

var height="400px";

var hidden_cols="currency_id,warehouse,supplier_id";

cjTable(container,url,table_title,height,hidden_cols);                                    ///表格高度,需要隐藏的td

</script>

其中：

container:是包含表格的容器的id,

url:提供表格数据的来源url,数据是json格式的

table_title:表格的表头的文字

height:表格的高度

hidden_cols:哪些json字段无需显示

网友可以自由下载这个js文件，便可直接使用它来构建固定表头的html表格了。下载地址：http://www.eacherp.net 下载后把rightgrid.js文件打开即可看到cjTable函数。

本文出自 “11027040” 博客，请务必保留此出处http://11037040.blog.51cto.com/11027040/1759020