CSS实现锁定行锁定列

最新推荐文章于 2023-02-17 14:52:16 发布
最新推荐文章于 2023-02-17 14:52:16 发布
阅读量1.1k 收藏
点赞数
文章标签： 前端框架 javascript ViewUI 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>报表展示行列固定</title>
<link type="text/css" href="Vmain.css" rel="stylesheet" />
<style>
	body, html,table {
		margin:0;
		padding:0;
	}
	
        .FixedTitleRow
        {
            position: relative; 
            top: expression(this.offsetParent.scrollTop); 
            z-index: 10;
            background-color: #E6ECF0;
        }
        
        .FixedTitleColumn
        {
            position: relative; 
            left: expression(this.parentElement.offsetParent.scrollLeft);
        }
        
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color: #E6ECF0;
        }	
</style>
</head>

<body>
<div id="scrollDiv" style="overflow:auto;height:100%;width:100%;cursor:default;display:inline;position:absolute;">
<table id="Vtable_style" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="overflow:auto;">
	<tr class="VtabExcel_Top FixedTitleRow">
        <th class="FixedTitleColumn" style=" background:url(c_img/Vbg_Excel_2.png) right top;"></th>
        <th class="FixedTitleColumn" width="110">A</th>
        <th width="56">B</th>
        <th width="175">C</th>
        <th width="175">D</th>
        <th width="145">E</th>
        <th width="56">F</th>
        <th width="175">G</th>
        <th width="170">H</th>    
  </tr>
  <tr class="FixedTitleRow">
    <td class="VtabExcel_left FixedTitleColumn">1</th>
    <th class="Vtitle_th FixedTitleColumn" colspan="8">资产负债表</td>
  </tr>
  <tr class="FixedTitleRow">
    <td class="VtabExcel_left FixedTitleColumn">2</td> 
    <td class="VSecTitle FixedTitleColumn" colspan="8">会股01表</td>
  </tr>
  <tr class="FixedTitleRow">
  	<td class="VtabExcel_left FixedTitleColumn">3</td>
    <td class="VthrTitle FixedTitleColumn" colspan="7">
    	<span class="VthrTitle_span">单位：股份公司总部</span>  
        <span class="VthrTitle_span">2011年10月</span>
    </td>
    <td class="VthrTitle FixedTitleColumn">金额单位：元</td>
  </tr>
  <tr>
    <td class="VtabExcel_left FixedDataColumn">4</th>
    <th class="FixedDataColumn">资 产</th>
    <th class="FixedDataColumn">行次 </th>
    <th>期末余额</th>
    <th>年初余额 </th>
    <th>负债及股东权益 </th>
    <th>行次 </th>
    <th>期末余额</th>
    <th>年初余额 </th>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">5</td>
    <td class="navTitle FixedDataColumn">流动资产： </td>
    <td class="Vcenter FixedDataColumn">1 </td>
    <td class="Vright">17,114,201,789.99 </td>
    <td class="Vright">9,365,696,141.85 </td>
    <td class="navTitle">流动负债： </td>
    <td class="Vcenter"> </td>
    <td class="Vright"> </td>
    <td class="Vright"> </td>
  </tr>  
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">6</td>
    <td class="FixedDataColumn">货币资金</td>
    <td class="Vcenter FixedDataColumn">2 </td>
    <td class="Vright">114,201,789.99 </td>
    <td class="Vright">14,201,789.99 </td>
    <td>货币资金</td>
    <td class="Vcenter"> </td>
    <td class="Vright">17,114,201,789.99 </td>
    <td class="Vright">9,365,696,141.85 </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">7</td>
    <td class="FixedDataColumn">内部存款 </td>
    <td class="Vcenter FixedDataColumn">3 </td>
    <td class="Vright"></td>
    <td class="Vright">5 </td>
    <td>内部存款 </td>
    <td class="Vcenter"> </td>
    <td class="Vright">114,201,789.99 </td>
    <td class="Vright">14,201,789.99 </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">8</td>
    <td class="FixedDataColumn">货币资金</td>
    <td class="Vcenter FixedDataColumn">4 </td>
    <td class="Vright">365,696,141.85 </td>
    <td class="Vright">365,696,141.8 </td>
    <td>货币资金</td>
    <td class="Vcenter"> </td>
    <td class="Vright">365,696,141.85 </td>
    <td class="Vright">365,696,141.8 </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">9</td>
    <td class="FixedDataColumn">内部存款 </td>
    <td class="Vcenter FixedDataColumn">5 </td>
    <td class="Vright">114,201,789.99 </td>
    <td class="Vright">365,696,141.8 </td>
    <td>内部存款 </td>
    <td class="Vcenter"> </td>
    <td class="Vright">114,201,789.99 </td>
    <td class="Vright">365,696,141.8 </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">10</td>
    <td class="FixedDataColumn">货币资金</td>
    <td class="Vcenter FixedDataColumn">6 </td>
    <td class="Vright"> </td>
    <td class="Vright"></td>
    <td>货币资金</td>
    <td class="Vcenter"> </td>
    <td class="Vright">365,696,141.8 </td>
    <td class="Vright">114,201,789.99 </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">11</td>
    <td class="FixedDataColumn">内部存款 </td>
    <td class="Vcenter FixedDataColumn">7 </td>
    <td class="Vright">17,114,201,789.99 </td>
    <td class="Vright">696,141.85 </td>
    <td>内部存款 </td>
    <td class="Vcenter"> </td>
    <td class="Vright"> </td>
    <td class="Vright"> </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">12</td>
    <td class="FixedDataColumn">货币资金</td>
    <td class="Vcenter FixedDataColumn">8 </td>
    <td class="Vright">696,141.85 </td>
    <td class="Vright">-114,201,789.99 </td>
    <td>货币资金</td>
    <td class="Vcenter"> </td>
    <td class="Vright">17,114,201,789.99 </td>
    <td class="Vright">696,141.85 </td>
  </tr>
  <tr>
  	<td class="VtabExcel_left FixedDataColumn">13</td>
    <td class="FixedDataColumn">内部存款 </td>
    <td class="Vcenter FixedDataColumn">9 </td>
    <td class="Vright">647,201,789.99 </td>
    <td class="Vright">17,114,201,789.99 </td>
    <td>内部存款 </td>
    <td class="Vcenter"> </td>
    <td class="Vright">696,141.85 </td>
    <td class="Vright">-114,201,789.99 </td>
  </tr>
</table>
</div>

</body>
</html>


功能主要体现在CSS上，其中：

固定行：tr加FixedTitleRow

固定固定行中的列：td加FixedTitleColumn

固定列：td加FixedDataColumn

不固定：不加

可以用右键调用jquery方法改变固定行，但是列无法设置

<script>
$(document).ready(function(){
  $("td").click(function(){

  $("#tr4 th:lt(5)").addClass("FixedTitleColumn");
  $("#tr5 td:lt(5)").addClass("FixedTitleColumn");
  $("#tr6 td:lt(5)").addClass("FixedTitleColumn");
  });
});

</script>


iteye_21202
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用js+css+html实现固定table的列头不动
11-26
话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2、Javascript [removed] //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
原生css实现table锁行锁列
xuchzhi的博客
02-17 266
表格锁行锁列，移动端可用
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 5764
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
CSS—table—固定列和行
m0_37616866的博客
08-11 3638
为了方便用户在使用table表格，可以参照头部或侧边的固定字段，更快的定位数据的对应的意思，故 本文使用纯CSS实现头部和侧边固定相关案例，共大家学习交流。
小福利，采用excel函数制作大屏可视化，用sumifs函数快速统计汇总数据，锁行锁列以及锁列不锁行
littlespider889的博客
03-20 2005
小福利，采用excel函数制作大屏可视化，用sumifs函数快速统计汇总数据，锁行锁列以及锁列不锁行 源数据如下图所示 第一步处理源数据的效果是下图 其中根据年份变化，求总订单量、总销量、总销售额，只要用单条件求和函数sumif即可 总订单量 =COUNTIF(某平台手机销售!F:F,B2) 总销量 =SUMIF(某平台手机销售!F:F,B2,某平台手机销售!H:H) 总销售额 =SUMIF(某平台手机销售!F:F,B2,某平台手机销售!J:J) 同时满足年份和品牌进行销量统计 =SUMIFS(某平台
css 锁定屏幕,给CSS加把锁_Responsive, 排版, CSS, 会员专栏 教程_W3cplus
weixin_42140625的博客
08-03 479
看到该标题，我想你可能会感到非常的意外和好奇，“CSS怎么能加把锁呢”？其实这里所说的给CSS加把锁是指业内所说的CSS Locks(或者CSS calc Lock)。该概念是@Tim Brown在2012年提出的一个概念，该技术其主要致力于解决文本排版可读性相关的技术难度，特别是在实现一些精准的流式布局中的文本排版。在《Web技术10》中也提到过，@Mike Riethmuller、@Tim B...
如何禁用网页复制选中以及鼠标右击
qq_38952126的博客
10-11 1620
如何禁用网页复制选中以及鼠标右击
table列与行锁定
03-27
css锁定table的行与列,简单方便css锁定table的行与列,简单方便
锁定表头test.zip
05-04
HTML+css锁定表头完整实例源码，非常适合在后头管理系统中使用，保证可正常运行，有问题可留言，欢迎下载！
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
11-23
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
固定表格行和列css样式控制
08-28
固定表格行和列css样式控制，代码只做了固定一行两列，下载了根据自己的需求修改
html表格列锁定例子
06-25
html表格列锁定，能够锁定多列并拖拽，如果锁定的列超出div宽度的话，会取消拖拽效果，只有当需要锁定的列不大于div时显示正常
CSS+TABLE固定行列表
11-06
CSS+TABLE固定行列表,通过样式来控制Table的行、列固定。
目标锁定特效（追光者♂）.zip
08-13
大家好，这是一个通过前端技术实现的目标锁定特效。效果我已经在博客中有所展示，欢迎喜欢的朋友下载！
最简单最实用的WEB表格锁定表头和固定数据列的方法示例
10-29
最简单最实用的WEB表格锁定表头和固定数据列的方法示例，提升WEB版的ERP系统用户体验。
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
css列名不动_纯css实现固定表头和锁定列
weixin_30768979的博客
12-30 657
table表格是一个网站很常用的元素，用以展示大量的数据。在处理表格时，通常会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用css实现固定行或列的功能。一般做法大部分的网上介绍的实现方式，甚至部分ui框架如iview(虽然他本就是一个pc端框架)等都是通过三至四个表格组合，然后js处理同步滚动来实现，这样的好处是容易实现，pc端也不会出现什么问题。但是在手机...
用css锁定表格头部(锁定行)
Martin 的博客
01-15 3256
实现头部导航栏固定 用到的属性是： position:sticky  粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。 sticky  盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便...
通过CSS样式锁定Table的首行首列
最新发布
05-27
可以通过CSS的伪类选择器来实现锁定Table的首行和首列，具体实现方式如下： ```css /* 锁定首行 */ table tr:first-child { position: sticky; top: 0; background-color: #fff; z-index: 1; } /* 锁定首列 */...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值