两个Table固定表头，可根据页面大小自行调整（使用JavaScript）

最新推荐文章于 2021-06-07 18:21:38 发布
最新推荐文章于 2021-06-07 18:21:38 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： JavaScript HTML 文章标签： Html JavaScript Table固定表头 根据页面大小调整
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wintersweetsugar/article/details/17789399
版权
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title></title>  
<script>  
    /**  
     * @param oTarget                需要加载scroll的dom对象  
     * @param fnHandler              处理的回调函数   
     */  
    function eventHandler(oTarget, fnHandler) {  
        if (oTarget.addEventListener) {  
            oTarget.addEventListener("scroll", fnHandler, false);  
        } else if (oTarget.attachEvent) {  
            oTarget.attachEvent("onscroll", fnHandler);  
        } else {  
            oTarget["onscroll"] = fnHandler;  
        }  
    };  
  
    function oo(divContentID, divHeaderID) {  
        var div = document.getElementById(divContentID);  
        var left = div.scrollLeft;  
        var divHeader = document.getElementById(divHeaderID);  
        divHeader.scrollLeft = left;  
  
        var disWidth = div.children[0].style.width.replace("px", "")  
                - div.style.width.replace("px", "");  
        if (div.scrollLeft >= disWidth) {  
            divHeader.style.overflowY = 'scroll';  
        } else {  
            divHeader.style.overflowY = 'hidden';  
        }  
    }  
  
    window.onload = function onStartLock() {  
        var oDiv = document.getElementById("divContentID");  
        eventHandler(oDiv, function() {  
            oo("divContentID", "divHeaderID");  
        });  
    };  
</script>  
</head>  
<body>  
    <div id="div1All"  
        style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px">  
        <div id="divHeaderID"  
            style="margin-right: auto; margin-left: auto; overflow: hidden;">  
            <table border="1" cellspacing="0"  
                style="BORDER-COLLAPSE: collapse; font-size: 15px"  
                borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"  
                width="600px">  
                <Tr style="background: navy; color: white; height: 30px">  
                    <Th width="100px">Header A</Th>  
                    <Th width="100px">Header B</Th>  
                    <Th width="100px">Header C</Th>  
                    <Th width="100px">Header D</Th>  
                    <Th width="100px">Header E</Th>  
                    <Th width="100px">Header F</Th>  
                </Tr>  
            </table>  
        </div>  
        <div id="divContentID"  
            style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll">  
            <table border="1" cellspacing="0"  
                style="BORDER-COLLAPSE: collapse; font-size: 15px"  
                borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"  
                width="600px">  
                <Tr>  
                    <Td width="100px">A</Td>  
                    <Td width="100px">B</Td>  
                    <Td width="100px">C</Td>  
                    <Td width="100px">D</Td>  
                    <Td width="100px">E</Td>  
                    <Td width="100px">F</Td>  
                </Tr>  
                <Tr>  
                    <Td width="100px">A</Td>  
                    <Td width="100px">B</Td>  
                    <Td width="100px">C</Td>  
                    <Td width="100px">D</Td>  
                    <Td width="100px">E</Td>  
                    <Td width="100px">F</Td>  
                </Tr>  
                <Tr>  
                    <Td width="100px">A</Td>  
                    <Td width="100px">B</Td>  
                    <Td width="100px">C</Td>  
                    <Td width="100px">D</Td>  
                    <Td width="100px">E</Td>  
                    <Td width="100px">F</Td>  
                </Tr>  
                <Tr>  
                    <Td width="100px">A</Td>  
                    <Td width="100px">B</Td>  
                    <Td width="100px">C</Td>  
                    <Td width="100px">D</Td>  
                    <Td width="100px">E</Td>  
                    <Td width="100px">F</Td>  
                </Tr>  
                <Tr>  
                    <Td width="100px">A</Td>  
                    <Td width="100px">B</Td>  
                    <Td width="100px">C</Td>  
                    <Td width="100px">D</Td>  
                    <Td width="100px">E</Td>  
                    <Td width="100px">F</Td>  
                </Tr>  
            </table>  
        </div>  
    </div>  
</body>  
</html> 
曜之南枝
关注
专栏目录
JavaScript实现两个Table固定表头根据页面大小自行调整
10-26
本示例介绍如何使用JavaScript实现两个Table的固定表头，并且可以根据页面大小自动调整。这种方法尤其适用于响应式布局，确保在不同屏幕尺寸下仍能保持良好的用户体验。 首先，我们需要理解代码的结构。代码包含一...
html 把table固定住,html Table实现表头固定
weixin_31129039的博客
06-24 791
合同号签约客户发布客户合同状态选定条件的发布周期额度看看css*{padding:0;margin:0;}th{border:1px solid #e6e6e6;line-height: 5vh;color:#666666;font-size: 16px;}table {border-collapse: collapse;width: 100%;}td {padding:5px;border:1p...
原生js实现table表格列宽自由缩放
小妖666个人笔记
12-08 1469
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table</title> </head> <body> <div style="width: 80%;overflow-x: scroll;margin: 40p...
html的table效果,经常使用的两个清爽的table样式
weixin_36002349的博客
06-03 397
附上两个我经常使用的table样式：复制代码代码如下:body,table{font-size:12px;}table{table-layout:fixed;empty-cells:show;border-collapse: collapse;margin:0 auto;}td{height:30px;}h1,h2,h3{font-size:12px;margin:0;padding:0;}.t...
html表格联动,Table表格的二级联动
weixin_35122994的博客
06-07 850
用Table实现二级联动头一次听说二级联动这个概念，悔恨以前做课设的时候对这些东西浅浅略过。网上搜寻一番后发现大多数例子都是对下拉选框的二级联动，最常用的应该就是省市区的选择了吧。【复现select下拉选框的二级联动】两个下拉选框，一个定义市一个定义区；区随市的变化而变化。为市对应的下拉列表定义触发事件onchange(),当其中内容发生变化时触发函数。-请选择--请选择-下面是js脚本：定义了一...
JS实现不触发页面刷新的前提下让表格大小实时根据浏览器窗口大小变化而变化
xiaohui-c的博客
02-25 765
JS实现不触发页面刷新让表格大小跟随窗口大小变化而改变 在我们平时使用vue+element-ui进行开发的时候，常常会遇到一个需求就是当浏览器大小改变的时候，页面主要内容容器大小也需要改变，以此来适应浏览器。 最简单的办法就是在监听到浏览器大小改变的时候，通过刷新页面来对内容容器大小高度进行重新赋值 let clientHeight = document.documentElement.clientHeight 但是有时控制浏览器窗口大小是一个比较频繁的动作，如果浏览器的大小每改变一次，页面就要进行一次
两个table实现固定表头拖动时仅限表体移动
09-25
标题“两个table实现固定表头拖动时仅限表体移动”描述了一种利用两个表格来完成这一功能的技术。这个方法的关键在于将表头和表体分开，然后通过CSS定位来实现滚动行为的控制。 首先，我们需要理解这种方法的基本...
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
- 创建两个table元素，一个作为表头，一个用于展示数据。 - 用一个div包裹表头table，以便对其进行样式和位置的控制。 - 设置div的CSS定位属性为relative，这样内部元素的绝对定位就是相对于这个div进行的。 - ...
asp.net html+table固定表头和左侧列.rar
08-20
一种常见方法是通过创建两个表格，一个用于表头，另一个用于数据，然后通过CSS设置定位和相对位置，确保表头在页面滚动时保持在顶部。 固定左侧列的实现原理类似，也可以通过CSS的position属性来处理。可以创建一个...
vue+el-table 根据屏幕大小动态设置height属性以固定表头
热门推荐
qq_42204033的博客
09-13 2万+
el-table需要固定表头时只要在标签里加上height属性就可以了，但是怎样根据屏幕大小自动调整height属性呢？ 解决办法：vue加载时计算下需要给table设置的height &lt;el-table ref="table" :data="info" :span-method="colspanMethod" :height="tableHeight"&gt; &lt;el-...
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置
09-23
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
js实现html表格列宽可拖拽修改
04-04
js实现html表格列宽可拖拽修改 .
设计表头固定并且列宽可调整的Table表格
gemuandyou的专栏
01-21 9323
表头固定 我们都知道HTML中table的thead是会随着tbody滚动的。所以要实现tbody内容滚动，而表头固定就需要用两个table来显示，一个显示只用于表头，另一个用于显示tbody内容。 表格列宽调整 添加一个图标或者div，作为拖动的标尺，当触发左键事件时（绑定mousedown事件），获取鼠标当前X坐标并设置鼠标样式。 $('.table-col-resize').eq(+
两个table实现固定表头
xuxiaofang77的专栏
05-09 1164
刚开始接触asp.net，
表格锁定表头，并且表头宽度跟内容宽度对齐
kao5585682的博客
09-17 3845
因为业务需要，需要将列表的表头锁死所以在各种百度之后终于找到了解决方案。 就是将表头跟内容分离开，用一个大的DIV包住 然后通过CSS将内容对齐，具体看代码 1：html &lt;div class="sti-tbl-container" &gt; &lt;div class="sti-tbl-header" style="padding-right:17p...
jQ方法实现table多数据固定表头
砂糖葫芦娃的博客
12-07 1000
只要在html页面上写一个table，引用下方的代码，就会自动完成上下左右多数据表头固定的功能.没有添加样式，大家可以随意自行添加。jquery.fexedTabkeHead.js(function () {) { .fn.extend({ FixedHead: function (options) { var defualts={
为表格添加可调整列宽功能
MoLi的博客
04-16 311
为表格添加可调整列宽功能 1、引入js架包　　<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> 　　<script src="js/colResizable-1.6.js" type="text/javascript"&gt...
bootstrap table 实现表头固定，列宽可拖动改变宽度大小
最新发布
08-29
### 回答1： ...综上所述，要实现Bootstrap table的表头固定和列宽可拖动改变大小的功能，可以使用fixedHeader和resizable两个插件。这些插件能够使表格更加灵活和易于使用，并提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值