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 ...
随机推荐
- 【LOJ】#2447. 「NOI2011」兔兔与蛋蛋的游戏
题解 对于75分来说,操作肯定不会成环,可以暴搜 看成空格在移动,空格移动到原来的位置肯定经历了偶数个格子,但是操作的人是两个不同的人,所以肯定不会成环 对于满分做法,要找到一种更好的方式判先手是否会 ...
- 【Codechef】Chef and Bike（二维多项式插值）
something wrong with my new blog! I can't type matrixs so I come back. qwq 题目:https://www.codechef.c ...
- Bootstrap--响应式图片轮播
<div class="row"> <div class="span12"> <section id="carousel ...
- maven设计思想
20171108 maven设计思想? archetype 插件 学习插件.
- 在 Pandas 中更改列的数据类型
import pandas as pd import numpy as np a = [['a', '1.2', '4.2'], ['b', '70', '0.03'], ['x', '5', '0' ...
- python爬虫+词云图，爬取网易云音乐评论
又到了清明时节,用python爬取了网易云音乐<清明雨上>的评论,统计词频和绘制词云图,记录过程中遇到一些问题 爬取网易云音乐的评论 一开始是按照常规思路,分析网页ajax的传参情况.看到 ...
- jQuery事件和动画
1.toggle事件 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- [flask]flask_login模块,session及其他
读flask源码的时候,有一点一直到现在都没有一个清晰的概念,比如四个全局变量g,current_app,session,request是怎么做到的 按照查到的资料里面的说法,为了不至于每次都主动调用 ...
- modernizr.js的介绍和使用
原文链接:https://www.cnblogs.com/-simon/p/5907053.html Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分 ...
- win32创建窗口函数（windows程序内部运行机制）
利用win32创建窗口函数,主要操作步骤为: 1.设计一个窗口类 2.注册窗口类 3.创建窗口 4.显示及窗口更新 5.消息循环 6.窗口过程函数 (1)设计一个窗口类 设计窗口类,这样的类型已经 ...