table固定首行(一)
<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"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
</table> <!--*************左下-END***********-->
</div>
</td>
<td align="left" valign="top">
<div style="width:450;height:150;overflow:scroll " onscroll="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"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> <!--*************右下-END*****************-->
</div>
</td>
</tr>
</table>
<p id="y"> </p>
<p id="x"> </p>
</body>
</html>
table固定首行(一)的更多相关文章
- table固定首行(二)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue table 固定首列和首行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- js div及table首行顶部吸附示例
js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...
- npoi实现 从固定的行读取数据作为表头并返回datable
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- HTML5 的段落首行缩进
text-indent:0em;表示当前行不需要缩进,文本顶头开始.这个属性可以用在 div p等元素下面 文本首行的缩进(在首行文字之前插入指定的长度) p { line-height: 2em ...
- js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
- css如何设置首行文字缩进？
在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...
- Python程序的首行
>问题 >>在一些python程序中的首行往往能够看见下面这两行语句中的一句 >>>#!/usr/bin/Python >>>#!/usr/bin ...
- 锁定TABLE的首行和首列
1. 2. 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
随机推荐
- USACO 5.3 Milk Measuring
Milk MeasuringHal Burch Farmer John must measure Q (1 <= Q <= 20,000) quarts of his finest mil ...
- java.lang.NoClassDefFoundError: javax/persistence/EntityListeners
在使用 Hibernate 进行数据库操作的时候,在启动 Tomcat 服务器后,Console 控制台可能会打印出这样的异常:java.lang.NoClassDefFoundError: java ...
- PHP的exec()函数无返回值排查方法[转]
在安全imagemagic时 需要用到 exec很多服务器上安装失败 exec()执行外部命令失败,但没有任何错误信息. exec执行某命令在命令行下没有问题,但是在PHP中就出错.这个问题99.99 ...
- 1035 Password (20)（20 point(s)）
problem To prepare for PAT, the judge sometimes has to generate random passwords for the users. The ...
- 安装ffmpeg
安装2个源 centos7.2 1.yum install -y epel-release 2.rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x8 ...
- 【WIN10】程序內文件讀取與保存
DEMO下載:http://yunpan.cn/cFHIZNmAy4ZtH 访问密码 cf79 1.讀取與保存文件 Assets一般被認為是保存用戶文件數據的地方.同時,微軟還支持用戶自己創建文件夾 ...
- codevs 1005 生日礼物
1005 生日礼物 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 9月12日是小松的朋友小寒的生日.小松知 ...
- CF696B Puzzles 期望
显然可以树形$dp$ 令$f[i]$表示$i$号节点的期望时间戳 不妨设$fa$有$k$个子节点,对于$i$的子节点$u$,它是第$j(1 \leqslant j \leqslant k)$个被访问的 ...
- 【二分】【预处理】zoj4029 Now Loading!!!
题意:给定一个序列,多次询问 将a数组从小到大排序,下面那个值只有不超过32种,于是预处理f[i][j],表示分母为i时,aj/i的前缀和是多少. 然后对于一个给定的p,一定将分母划分成了一些连续的段 ...
- Kibana安装及使用说明
Kibana安装及使用说明 Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在Elasticsearch索引中的数据. 官方地址:https://www. ...