固定table表头

最新推荐文章于 2024-07-16 18:36:21 发布
最新推荐文章于 2024-07-16 18:36:21 发布
阅读量714 收藏 1
点赞数 1
分类专栏： HTML 文章标签： table fix 固定表头 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014716149/article/details/46272749
版权

项目中需要在滚屏中悬浮TABLE表头title，在网上找到一个不错的例子，思路为克隆当前TABLE的表头悬浮在滚动条容器顶端，开发中发现时常会出现表头与数据行错位的情况，故略作改进，即克隆TABLE表头和第一行数据（实际是table的第二行），并使用css的opacity，使第一行数据透明不可见，如此便解决了这个问题，不受table表列的宽度影响。
代码如下：

<html>  
<head>  
<title>固定表头</title>  
</head>  
<style>  
    .box{  
        width:100%;  
        height:100%;
        overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */  
        position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */  
    }  
    table,tr,th,td{  
        border-collapse:collapse;  
    }  
    table{  
        width:100%;  
    }  
    td{  
        height:24px;  
        line-height:24px;  
        padding:3px 5px;  
        background-color:#ddd;  
        word-break:break-all;/** 设置当文本过长时换行 */  
            border:1px solid #ccd;  
    }  

    th{  
        height:24px;  
        line-height:24px;  
        background-color:#cfc;  
        border:1px solid #ccd;  
    }  
    .opacityTD td{height:1px; line-height:1px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; border: 0;}
</style>  
<SCRIPT LANGUAGE="JavaScript">  

/**  
 * 功能：固定表头  
 * 参数  viewid     表格的id  
 *           scrollid   滚动条所在容器的id，此div的overflow-y必须设置为auto或scroll;
 *       size       表头的行数（复杂表头可能不止一行）  
 */  
function fixTableTitle(viewid,scrollid,size){  
        var scroll = document.getElementById(scrollid);
        // 将表格拷贝一份
      var tb2 = document.getElementById(viewid).cloneNode(true); 
        // 将拷贝得到的表格保留表头和第一行数据 
      for(var i=tb2.rows.length;i>size+1;i--){  
          // 每次删除数据行的第一行  
          tb2.deleteRow(size);  
      }
      var child = tb2.getElementsByTagName("tr")[1];//获取数据行
      if(typeof(child)=='undefined')return;// 若没有数据，则跳出此方法
      child.className = "opacityTD";//设置样式透明不可见
        // 创建一个div
      var bak = document.createElement("div");  
      var attr_id = document.createAttribute('id');                        //新建Element的id属性
      attr_id.nodeValue = 'div'+scrollid;                                    //为id属性赋值
      bak.setAttributeNode(attr_id);                                //为Element设置id属性
        // 将创建得到的div添加到滚动条所在容器的div
      scroll.appendChild(bak);  
        // 将拷贝得到的表格在删除数据行后添加到创建的div中
      bak.appendChild(tb2);  
      // 设置此DIV的属性
      bak.style.position = "absolute";  
      bak.style.display = "block";  
      bak.style.left = 0;  
      bak.style.top = "0px";  
      bak.style.width = "100%";  
      // 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端  
      scroll.onscroll = function(){
            var topH = this.scrollTop;//document.body.screenTop;
            bak.style.top = topH + "px";
      }
}
// 在页面加载完成后调用该方法  
window.onload = function (){  
    fixTableTitle("tab2",'box2',1);  
}  

</SCRIPT>  
<body>  
        <div class="box" id="box2">  
            <table id="tab2">  
                <tr>
                    <th width="5%">序号</th>
                    <th width="10%">姓名</th>
                    <th width="20%">身份证号</th>
                    <th width="15%">费款所属期</th>
                    <th width="10%">缴费基数</th>
                    <th width="15%">个人缴费金额</th>
                    <th width="15%">单位缴统筹金额</th>
                    <th width="10%">缴费标志</th>
                </tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
                <tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>  
            </table>  
        </div>
</body>  
</html>
PierreLuo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table固定表头和列头
12-15
固定表头和列头
固定table表头的插件
08-08
为了解决这个问题，"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置，无论用户如何滚动，表头始终可见，提高了用户的浏览体验。 在HTML中，实现固定表头通常需要CSS和JavaScript的配合。...
多级表头固定列问题
最新发布
链珠的博客
07-16 352
父级的width，是需要固定的列的width的总和。el-table 多级表头下。
uniapp实现表格冻结
weixin_53339757的博客
09-19 1733
uniapp实现表格冻结
如何固定table的表头
整理的参考资料
12-19 1031
1.html代码HTML>    HEAD>        title>title>        meta http-equiv="Content-Type" content="text/html; charset=gb2312">        style> .fixedHeaderTr {}{ position:relative; top:expression(this.offsetPa
table固定表头
qq_43588993的博客
08-18 143
问题：：设置了标签position为以下： position: sticky;top: -1px;z-index: 2;background: #96c9f1; 但是有时不生效 解决方法：为下的设置position: position: sticky;top: -1px;z-index: 2;background: #96c9f1;
table 表头固定
github_38186390的博客
09-27 2004
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
css固定table表头的实现代码可同时看到表头和表格底部
09-25
为了解决这个问题，可以采用固定表头的方法，即无论用户如何滚动表格，表头始终固定在页面的顶部。 使用CSS固定表格表头的技术可以通过多种实现方式完成。此处提供了两种方法的代码示例，让我们来深入探讨这些技术...
jquery插件固定table表头
09-25
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
js table 固定表头
02-16
js table 固定表头
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
table表头固定
07-29
单个table thead负责表头固定合并 tbody负责展示数据并且带滚动
html Table 表头固定的实现
09-22
首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景颜色，确保它在视觉上与表格主体（.table-body）有所区分。重要的是，给这个表头添加一个合适的padding-right样式。这个...
Table固定表头
Jim~LoveQ的博客
09-04 1642
Table固定表头的方法： 1. 纯`CSS`方式 2. 使用`bootstrap-table`方式
table表格固定表头
weixin_54366356的博客
06-04 6003
table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！ 废话不多说，直接上代码！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
el-table 怎么修改表头和表格的背景颜色
07-27
你可以通过使用`header-style`和`row-style`属性来修改`el-table`的表头和表格的背景颜色。 1. 修改表头的背景颜色： 你可以使用`header-style`属性来自定义表头的样式。通过设置该属性，你可以指定表头的背景颜色。 ```html <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" header-style="background-color: #f0f0f0;"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> ``` 在上面的示例中，`header-style`属性被添加到了第一个表头列上，并设置了背景颜色为 `#f0f0f0`。 2. 修改表格的行背景颜色： 你可以使用`row-style`属性来自定义表格行的样式。通过设置该属性，你可以指定表格行的背景颜色。 ```html <el-table :data="tableData" style="width: 100%" row-style="rowStyle"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> ``` 在上面的示例中，我们将`row-style`属性设置为一个方法 `rowStyle`，并在方法中返回一个对象，其中可以指定行样式的各种属性，如背景颜色。 ```javascript export default { methods: { rowStyle(row, index) { if (index % 2 === 0) { return { background: '#f0f0f0', }; } }, }, }; ``` 在上面的示例中，我们通过 `rowStyle` 方法来设置奇数行的背景颜色为 `#f0f0f0`。 通过使用`header-style`和`row-style`属性，你可以自定义`el-table`的表头和表格的背景颜色。你可以根据实际需求进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值