表格的固定 头和列的实现

最新推荐文章于 2019-07-16 15:26:00 发布
最新推荐文章于 2019-07-16 15:26:00 发布
阅读量392 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36084681/article/details/90489667
版权

        核心思想:css加js实现:分为四个表格:,四个区域,左边一个大的div,右边一个大的div,各自包着上下两个div,,然后里面包着table,

右边特殊点,上边还包了一层div,才是表格:

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <title>固定标题列、标题头table</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0px;
            width: 100%;
            border: #000 solid 0px;
        }

        table td {
            border: 1px solid #000;
            height: 25px;
            text-align: center;
            border-left: 0px;
        }

        table th {
            background: #edd3d4;
            color: #a10333;
            border: #000 solid 1px;
            white-space: nowrap;
            height: 21px;
            border-top: 0px;
            border-left: 0px;
        }

        .t_left {
            width: 20%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
        }

        /*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/
        .t_r_content {
            width: 100%;
            height: 220px;
            background: #fff;
            overflow: auto;
        }

        .cl_freeze {
            height: 220px;
            overflow: hidden;
            width: 100%;
        }

        /* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/
        /* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
        /* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/
        .t_r {
            width: 69.5%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-right: #000 solid 1px;
        }

        .t_r table {
            width: 1700px;
        }

        .t_r_title {
            width: 1720px;
        }

        /*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/
        .t_r_t {
            width: 100%;
            overflow: hidden;
        }

        .bordertop {
            border-top: 0px;
        }
    </style>
    <script>
        function aa() {
            var a = document.getElementById("t_r_content").scrollTop;
            var b = document.getElementById("t_r_content").scrollLeft;
            document.getElementById("cl_freeze").scrollTop = a;
            document.getElementById("t_r_t").scrollLeft = b;
        }
    </script>
</head>
<body>
<div style="width:100%">
    <div class="t_left">
        <div style="width:100%;">
            <table>
                <tr>
                    <th style="width:50%">账号</th>
                    <th style="width:50%">姓名</th>
                </tr>
            </table>
        </div>
        <div class="cl_freeze" id="cl_freeze">
            <table>
                <tr>
                    <td style="width:50%" class="bordertop">1</td>
                    <td style="width:50%" class="bordertop">1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>15</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td>16</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>18</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>20</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="t_r">
        <div class="t_r_t" id="t_r_t">
            <div class="t_r_title">
                <table>
                    <tr>
                        <th width="10%">字段A</th>
                        <th width="20%">字段B</th>
                        <th width="10%">字段C</th>
                        <th width="20%">字段D</th>
                        <th width="20%">字段E</th>
                        <th width="20%">字段F</th>
                    </tr>
                </table>
            </div>
        </div>
        <div class="t_r_content" id="t_r_content" onscroll="aa()">
            <table>
                <tr>
                    <td width="10%" class="bordertop">1</td>
                    <td width="20%" class="bordertop">1</td>
                    <td width="10%" class="bordertop">1</td>
                    <td width="20%" class="bordertop">1</td>
                    <td width="20%" class="bordertop">1</td>
                    <td width="20%" class="bordertop">1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>7</td>
                    <td>7</td>
                    <td>7</td>
                    <td>7</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>10</td>
                    <td>10</td>
                    <td>10</td>
                    <td>10</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>11</td>
                    <td>11</td>
                    <td>11</td>
                    <td>11</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>12</td>
                    <td>12</td>
                    <td>12</td>
                    <td>12</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>13</td>
                    <td>13</td>
                    <td>13</td>
                    <td>13</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td>14</td>
                    <td>14</td>
                    <td>14</td>
                    <td>14</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>15</td>
                    <td>15</td>
                    <td>15</td>
                    <td>15</td>
                    <td>15</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td>16</td>
                    <td>16</td>
                    <td>16</td>
                    <td>16</td>
                    <td>16</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>17</td>
                    <td>17</td>
                    <td>17</td>
                    <td>17</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>18</td>
                    <td>18</td>
                    <td>18</td>
                    <td>18</td>
                    <td>18</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>19</td>
                    <td>19</td>
                    <td>19</td>
                    <td>19</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>20</td>
                    <td>20</td>
                    <td>20</td>
                    <td>20</td>
                    <td>20</td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

分析:

 table {
            border-collapse: collapse;
            border-spacing: 0px;
            width: 100%;
            border: #000 solid 0px;
        }

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit规定应该从父元素继承 border-collapse 属性的值。

 

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

 

 table td {
            border: 1px solid #000;
            height: 25px;
            text-align: center;
            border-left: 0px;
        }
 table th {
            background: #edd3d4;
            color: #a10333;
            border: #000 solid 1px;
            white-space: nowrap;
            height: 41px;
            border-top: 2px;
            border-left: 2px;
        }

white-space规定段落中的文本不进行换行：

 

normal

默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

 

 .t_left {
            width: 20%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
        }
 .t_r_content {
            width: 100%;
            height: 220px;
            background: #fff;
            overflow: auto;
        }

        .cl_freeze {
            height: 220px;
            overflow: hidden;
            width: 100%;
        }
 <script>
        function aa() {
            var a = document.getElementById("t_r_content").scrollTop;
            var b = document.getElementById("t_r_content").scrollLeft;
            document.getElementById("cl_freeze").scrollTop = a;
            document.getElementById("t_r_t").scrollLeft = b;
        }
    </script>

滑动触发:

scrollTop 

解释：元素滚动条内的顶部隐藏部分的高度。

伟大的程序猿csdn
关注
专栏目录
css固定表格头部
weixin_41141811的博客
06-25 1388
固定表头 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定表头</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .table-container {
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
适用于IE的固定表头和列的表格样式[CSS]
weixin_34087307的博客
04-27 271
先给个图，如下： 解决如下需求：1. 当数据记录多的时候不希望分页，或者希望一页显示多一些数据的时候，表格出现纵向滚动条，要求表头不随着滚动条的滚动而滚动。2. 当数据列比较多的时候，出现横向滚动条，要求序号列、操作列等相关的列不随着横向滚动条滚动而滚动。 本文给出的解决办法仅适用于IE，支持IE6/7/8，是CSS的，没有啥好说的，直接给出列出代码并提供下载：FixTable.ra...
mini-program-table:基于 WePY 实现的固定头和列的 table 组件，可根据自身需求进行修改扩展
05-30
固定头和列的表格实现 —— 小程序 基于 WePY 实现，大家可根据自身需要进行更改扩展。 演示 实现原理 橙色和紫色区域组成了横向滚动的 scroll-view。 红色虚线区域是纵向滚动的 scroll-view。但由于绿色区域设置了 pointer-events: none;，即实际只能触摸橙色区域。通过在橙色区域绑定的 scroll 事件（纵向），实时设置绿色虚线区域的 scrollTop。 紫色区域是固定头部，绿色区域是固定列。左上角的绿色区域是横向与纵向共同固定的区域。 实现要点 绑定了 scroll 事件的 scroll-view 要指定 throttle: false，否则回调函数有可能取不到最终位置的 scrollTop 值。官方文档目前未提及此属性，。 固定列需要设置 pointer-events: none;，实现点击穿透。使得 tbody 能触发 scroll 事件，
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
vue表格实现固定表头首列
11-02
在实现固定表头和首列的表格时，我们将利用Vue的这两个特性来构建可复用的组件。 1. **数据绑定**：Vue中的数据绑定允许我们创建动态视图。在表格中，我们可以将数据存储在一个数组中，然后通过`v-for`指令遍历这个...
Android可固定表头和第一列自定义表格
04-03
Android可固定表头和第一列自定义表格，集成简单。 API使用说明： LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
以上是对于JS实现table表格固定表头且表头随横向滚动而滚动相关知识点的总结和解析。希望对理解和实现类似效果有所帮助。如果遇到疑问，可通过留言形式寻求帮助，作者承诺会及时回复。同时，对于支持网站和分享知识...
Vue多种方法实现表头和首列固定的示例代码
11-27
通过这种方式，我们可以实现Vue.js中表格的表头和首列固定，即使在表格内容滚动时，用户依然可以清晰地看到表头和首列，从而提高数据查看的便利性。这种方法利用了Vue.js的响应式数据绑定和事件监听功能，结合CSS的...
QT表格固定第一列，拖动时第一列不会遮挡
04-02
标签“QT 表格固定列”进一步强调了这个主题，表明这是一个关于QT界面开发中常见的需求。实现这一功能需要对QT的事件处理、模型/视图架构以及自定义组件有深入的理解。 压缩包中的文件"Frozencolumn"可能包含了一个...
JS固定表头和左边列（最新源码）1.9
03-31
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线， 修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题，有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能，修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时，锁定单元格错位的问题，修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度（锁定时，取实际的单元格宽度），当单元格的左右两边的borderWidth不一样时，会有一些错位 若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft的边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框控件（html object） 3) 复选框控件ID (string) 4) 空参数（尽量不用空参数）
固定html表(table)头的html/css/js源码
12-15
codeproject上找到的固定表头且用html/css/js实现的htm文件，使用：建立IIS虚拟路径后把zip中的三个文件拷贝到虚拟路径，使用IE调用table.htm即可。原文请参考：http://www.codeproject.com/KB/scripting/HTMLFixedHeaders.aspx
JS固定表头及左边列
07-02
原生JS写的表头固定及左边列固定功能，原创代码，代码比较简单，兼容IE8+、谷歌、火狐等主流浏览器，文件中包含JS源代码和示例。 此版本修正了之前的固定列的BUG。
JS固定表头和左边列
04-10
原生JS写的表头固定及左边列固定功能，原创代码，代码比较简单，兼容IE8+、谷歌、火狐等主流浏览器，当前版本为1.7，此版本修正了性能问题，支持合并后的表格单元格，表格单元格可以不用设置宽度了。当表格总宽度设置不当时会有一些错位，单元格左右边框宽度不一样时，会有一些错位。
js实现固定表头表列和表格翻页
03-06
功能特色： 1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数； 5. 排序数据支持数据类型自动识别（这点很强大）。例如：整型数据、浮点型数据、字母、电话号码、日期、链接 6. 表格外观样式可通过CSS灵活定制 7. 所需要引用的js文件非常小巧，压缩版仅2.5k 8. 使用非常简单，可进行参数配置
js 固定表头及固定列的js
weixin_30875157的博客
01-10 348
//给table 外层加一个div然后将divid传入方法，arr是一个数组里面填写需要固定的列数function fixedCol(arr,divId){ var colArr = arr || []; colArr.forEach(function(val){ $("#"+divId).scroll(function(){ var left = $("#"+d...
纯 CSS 的固定表头和首列
Triumphal
06-13 2414
将以下代码保存为网页文件后用非 IE 浏览器打开。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
关于JS、JQ首行首列固定展示
weixin_30527551的博客
07-16 262
当时遇见这个问题 是医院手麻系统大批量数据展示，由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据： 采用函数的方式进行 JQ /** * 功能：固定表头 * 参数 viewid 表格的id * scrollid 滚动条所在容器的id * size 表头的...
js固定表头和第一列固定
03-21
js固定表头和第一列固定，内容变化
jQuery实现固定表头和列头的代码示例
接着，函数会创建一系列新的div元素，包括`TableID_tableFix`、`TableID_tableHead`、`TableID_tableColumn`和`TableID_tableData`，这些div将用于存放固定表头、固定列头、可滚动的列和数据部分。 接下来，函数会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值