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">&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 " 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">&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>
</body>
</html>

时间： 2024-12-19 17:19:52

table固定首行(一)的相关文章

table固定首行(二)

<!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 http-equiv="Content-

本文地址: https://www.cnblogs.com/veinyin/p/12101047.html 需求描述:首行固定,吸附在表头下,数据多时其他行可以纵向滚动方案一两个表格拼凑第一个表格展示头部和固定行第二个表格展示其它数据示意图如下适用场景:仅横向纵向均无滚动条时可用若有横向滚动条,两个表格的滚动条是分开的,会出现滚动A B不动,或滚动B A不动的情况,Windows下会展示两个横向滚动条,不美观若有纵向滚动条,在Windows下滚动条是默认有宽度的,滚动条的宽

js在table指定tr行上或底下添加tr行

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementById("tb1"); var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置 var newTd1 = newTr.insertCell(); newTd1.

高度固定，行数不固定的文字垂直居中问题

大家都知道,水平方向上的居中很好做到,text-align:center即可做到:垂直方向上的居中如果文字行数和高度都固定也很好实现,但是如果行数不固定呢? 最近,接到一个需求:高度固定,文字行数可能为一行.两行,但不管多少行,文字都要垂直居中.例如: 对于H5页面来说,CSS3的translate即可做到,其原理是外层div相对定位,里面的元素绝对定位,距离父容器的top值为50%,然后通过translate属性让它相对于自身向上移动50%. 其css为: 对于PC来说,就没这么好糊弄了:低版

html首行缩进、悬停效果

首行缩进:在块元素如(<div style="text-indent: 2em;">)设置首行缩进两个字符,则其子元素的块级元素如<dt>.<li>.<p>等会自动缩进两个字符,但通用段落标签<p>默认会换行多出一行空间(默认下外边距为1em),如要少去空行可设置其标签下外边距为0(<p style="margin-bottom: 0em;">)或外边距为0(<p style="

页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失

\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"></div> <script language="javascript"> $(document).ready(function(e) { $("#test").click(function(e) { $("#tanchu"

Android实现ListView或GridView首行/尾行距离屏幕边缘距离

Android上ListView&GridView默认行都是置顶的,这样会很丑. 一般为了解决这个问题都会在首行或尾行加上一个隐藏的View,那样实在是太麻烦了.在网上看博客的时候突然看到这个属性真的很有用! 直接上关键属性: 设置ListView或GridView的android:clipToPadding ＝ true, 然后通过paddingTop和paddingBottom设置距离就好了. 博客原文: http://www.cnblogs.com/xitang/p/3606578.htm

windows live writer首行缩进问题的解决

使用live writer写博客的确方便,但有个简单的问题,我始终无法解决,就是发布的博客老是无法首行缩进,试过好多方法,都有问题: 直接加全角空格.上传时就给过滤掉了. 修改defaultcss,结果只是本地改了,传上去一样. 用text template插件(参考),传上去倒是好了.但如果要再次编辑修改,打开后又还原成顶格了. 最终解决方案: 在博客园的后台设置中,增加一个样式即可: #cnblogs_post_body p{text-indent:24px;} --就这么简单! windo

Python程序的首行

>问题 >>在一些python程序中的首行往往能够看见下面这两行语句中的一句 >>>#!/usr/bin/Python >>>#!/usr/bin/env python >>为什么呢??? >原因脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它,就这么简单 >区别 >>#!/usr/bin/Python是告诉操作系统执行这个脚本的时候,调用/usr/bin下的python解释器 &