页面table的行列锁定

最新推荐文章于 2023-12-11 16:39:02 发布
最新推荐文章于 2023-12-11 16:39:02 发布
阅读量225 收藏
点赞数


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script>
function syncscroll(obj)
{
 //y.innerHTML = obj.scrollTop;
 //x.innerHTML = obj.scrollLeft;
 scroll1.children[0].style.position = "relative";
 scroll2.children[0].style.position = "relative";
 scroll1.children[0].style.left = "-"+obj.scrollLeft;
 scroll2.children[0].style.top =  "-"+obj.scrollTop;
 
}
</script>
<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
  <!--*********左上-BEGIN***********-->

  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="80" >
   <col width="80" >
   <col width="80" >
   </colgroup>
    <tr bgcolor="#FFFFFF">
   <td height="20">列1</td>
   <td>列2</td>
   <td>列3</td>
    </tr>
  </table>

  <!--**************左上-END**********-->
 </td>
    <td>
 <div id='scroll1' style="width:450;overflow:hidden ">
  <!--***********右上-BEGIN********-->

  <table style="width:900 " height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="150" >
   <col width="150" >
   <col width="150" >
   <col width="150" >
   <col width="150" >
   </colgroup>
    <tr bgcolor="#FFFFFF">
   <td>列4</td>
   <td height="20">列5</td>
   <td>列6</td>
   <td>列7</td>
   <td>列8</td>
    </tr>
  </table>

  <!--************右上-END**********-->
 </div>
 </td>
  </tr>
  <tr>
    <td align="left" valign="top">
 <div id='scroll2' style="height:150;overflow-y:hidden;overflow-x:scroll">
  <!--*************左下-BEGIN**************-->

  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="80" >
   <col width="80" >
   <col width="80" >
   </colgroup>

    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
  </table>

  <!--*************左下-END***********-->
 </div>
 </td>
    <td align="left" valign="top">
 <div style="width:450;height:150;overflow:scroll " οnscrοll="javascript:syncscroll(this)">
  <!--***********右下-BEGIN***********-->

  <table style="width:900 " height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
  <colgroup>
  <col width="150" >
  <col width="150" >
  <col width="150" >
  <col width="150" >
  <col width="150" >
  </colgroup>
    <tr bgcolor="#FFFFFF">
   <td width="100" height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
    </tr>
  </table>

  <!--*************右下-END*****************-->
 </div>
 </td>
  </tr>
</table>
<p id="y">&nbsp;</p>
<p id="x">&nbsp;</p>


http://demojava.iteye.com/blog/1736007
</body>
</html>

每米吃的耗子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Table锁定行列
Kenshin Cui's Blog
03-29 7456
摘要：在使用表格显示数据时我们经常会遇到数据过多无法一屏完全显示的问题，这个时候我们就会给用户显示滚动条来拖动。但是多数情况下表格是带有表头的，纵向拖动往往就看不到表头；而横向拖动又会出现看不到主题列（例如统计某人基本信息时姓名就是主题列），这个时候怎么办呢？答案就是行列锁定。 主要内容： 1.行列锁定的常用方法 2.IE下实现行列锁定 3.使用jQuery开发一个简单的行列锁定插件 一、行列锁定的常用方法 从使用上来看，要实现行列锁定的效果无非就是使用第三方组件和自己从零做起一步步实现。第三方
html中表格table冻结行和列
上善若水，道法自然
06-09 7239
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;完美冻结列和行 &lt;/title&gt; &lt;style type="text/css"&gt; .FixedHeaderColumnsTableDiv {
HTML 表格滚动锁定表头，实现固定行列
dongfangxinding的博客
12-11 1825
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义。
table表格固定行和列
05-11
table表格固定行和列。。。。。。。。。。。。。。。。。。。。。。。。。。。。
html锁定表头冻结行列兼容多浏览器
07-13
html 锁定表头 冻结行列 兼容 多浏览器 仿excel 测试兼容ie8, 火狐firefox, chrome
jquery锁定table 行列功能
04-08
NULL 博文链接：https://ollevere.iteye.com/blog/1584869
table实现固定行列效果
珍惜
05-06 3686
表格制作,实现二维表的展示，但是又需要固定行、列的要求，如下实现了一个demo，具体的实现细节如下，仅供参考...
table表格锁定任意数量列或行
下一站，幸福
01-08 6435
CSS样式如下(当然也可以自己更改)这都是在JS里面要调用的.LockRow /*固定行的样式*/ { position: relative; top:0; z-index:2; border: 1px solid #bbc8c8; } .LockCell /*固定列的样式*/ { position: relative; left:0; z-i
table行列固定
wfdoublext的专栏
11-04 522
&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .FixedTitleRow { position: relative; top: expression(this.offsetParent.scrollTop-2); z-index: 10; background-color: #E6ECF0;...
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
js实现html table 行,列锁定的简单实例
10-21
下面小编就为大家带来一篇js实现html table 行,列锁定的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
table的锁定行列
07-29
表格的行列锁定，采用js+css将table的行头列头冻结，自我感觉已经比较较完美了
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
兼容浏览器的table行列锁定
02-21
支持table列表行列锁定,详情请查看demo代码,使用注意div的层次和各个元素的ID值
JavaScript控制table某列不显示的方法
10-24
主要介绍了JavaScript控制table某列不显示的方法,涉及javascript操作表单的技巧,非常具有实用价值,需要的朋友可以参考下
UPS、蓄电池、空开、电缆配置计算方法.pptx
04-27
5G通信行业、网络优化、通信工程建设资料
node-v7.4.0.tar.xz
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
el-table某列过滤
10-14
可以使用 el-table 的 filter-method 属性来实现某列的过滤。具体步骤如下： 1. 在 el-table-column 中设置 prop 属性，指定要过滤的列的字段名。 2. 在 el-table 中设置 filter-method 属性，指定一个函数来处理...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值