1.

2.

3.

 <!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-Type" content="text/html; charset=gb2312" />

 <title>锁定TABLE的首行和首列</title>

 <style>

     body{font-size:12px;}

     .t_n{rowspan:1;width:30px; height:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}

     .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:auto; rowspan:'2'}

     .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}

     .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}

     .dd{height:200px!important; height:208px; overflow-y:hidden;}

     .t_i{width:500px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}

     .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}

     .ee{width:618px!important; width:620px}

     .t_i_h table{width:600px;}

     .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}

     .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}

     .cc table{width:600px; }

     .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}

 </style>

 <script>

     function aa()

     {

         var a = document.getElementById("cc").scrollTop;

         var b = document.getElementById("cc").scrollLeft;

         document.getElementById("dd").scrollTop = a;

         document.getElementById("hh").scrollLeft = b;

     }

 </script>

 </head>

 <body>

 <div class="t_n">

     <span>序号

      </span>

     <div class="dd" id="dd">

         <table cellpadding="0" cellspacing="0" border="0" class="t_number">

             <tbody>

                 <tr>

                 <td style="height:20px"> </td>

                 <tr>

                 <td>1</td>

                 </tr>

                 <tr>

                 <td>2</td>

                 </tr>

                 <tr>

                 <td>3</td>

                 </tr>

                 <tr>

                 <td>4</td>

                 </tr>

                 <tr>

                 <td>5</td>

                 </tr>

                 <tr>

                 <td>6</td>

                 </tr>

                 <tr>

                 <td>7</td>

                 </tr>

                 <tr>

                 <td>8</td>

                 </tr>

                 <tr>

                 <td>9</td>

                 </tr>

                 <tr>

                 <td>10</td>

                 </tr>

                 <tr>

                 <td>11</td>

                 </tr>

                 <tr>

                 <td>12</td>

             </tbody>

         </table>

     </div>

 </div>

 <!--table栏目-->

 <div class="t_i">

     <div class="t_i_h" id="hh">

         <div class="ee">

             <table cellpadding="0" cellspacing="0" border="0">

              <tr>

                <td colspan="2">星期1</td>

                <td colspan="2">星期2</td>

                <td colspan="2">星期3</td>

                <td colspan="2">星期4</td>

                <td colspan="2">星期5</td>

                <td colspan="2">星期6</td>

              </tr>

              <tr>

                <td>上午</td>

                <td>下午</td>

                <td>上午</td>

                <td>下午</td>

                <td>上午</td>

                <td>下午</td>

                <td>上午</td>

                <td>下午</td>

                <td>上午</td>

                <td>下午</td>

                <td>上午</td>

                <td>下午</td>

              </tr>

             </table>

         </div>

     </div>

     <div class="cc" id="cc" onscroll="aa()">

         <table cellpadding="0" cellspacing="0" border="0">

             <tr>

                 <td >1</td>

                 <td >1</td>

                 <td >1</td>

                 <td >1</td>

                 <td >1</td>

                 <td >1</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>2</td>

                 <td>2</td>

                 <td>2</td>

                 <td>2</td>

                 <td>2</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>3</td>

                 <td>3</td>

                 <td>3</td>

                 <td>3</td>

                 <td>3</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>4</td>

                 <td>4</td>

                 <td>4</td>

                 <td>4</td>

                 <td>4</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>5</td>

                 <td>5</td>

                 <td>5</td>

                 <td>5</td>

                 <td>5</td>

             </tr>

             <tr>

                 <td>6</td>

                 <td>6</td>

                 <td>6</td>

                 <td>6</td>

                 <td>6</td>

                 <td>6</td>

             </tr>

             <tr>

                 <td>7</td>

                 <td>7</td>

                 <td>7</td>

                 <td>7</td>

                 <td>7</td>

                 <td>7</td>

             </tr>

             <tr>

                 <td>8</td>

                 <td>8</td>

                 <td>8</td>

                 <td>8</td>

                 <td>8</td>

                 <td>8</td>

             </tr>

             <tr>

                 <td>9</td>

                 <td>9</td>

                 <td>9</td>

                 <td>9</td>

                 <td>9</td>

                 <td>9</td>

             </tr>

             <tr>

                 <td>10</td>

                 <td>10</td>

                 <td>10</td>

                 <td>10</td>

                 <td>10</td>

                 <td>10</td>

             </tr>

             <tr>

                 <td>11</td>

                 <td>11</td>

                 <td>11</td>

                 <td>11</td>

                 <td>11</td>

                 <td>11</td>

             </tr>

         </table>

     </div>

 </div>

 </body>

 </html>

4. CSS不同样式

     body{font-size:12px;}

     .t_n{width:30px; heihgt:240px!important; height:482px; float:left;  border-left:1px solid #000}

     .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:57px; height:59px}

     .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}

     .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}

     .dd{height:420px!important; height:208px; overflow-y:hidden; width:60px;}

     .t_i{width:1400px; height:auto; margin-left:60px; border-right:1px solid #000; border-top:1px solid #000}

     .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}

     .ee{width:1618px!important; width:1620px}

     .t_i_h table{width:1600px;}

     .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}

     .cc{width:100%; height:435px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}

     .cc table{width:1600px; }

     .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}

     body{font-size:12px;}

     .t_n{width:0px;heihgt:240px!important; height:480px; float:left;  border-left:1px solid #000}

     .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:60px; height:20px}

     .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}

     .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}

     .dd{height:420px!important; height:208px; overflow-y:hidden; width:60px;}

     .t_i{width:1400px; height:auto; margin-left:60px; border-right:1px solid #000; border-top:1px solid #000}

     .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}

     .ee{width:1618px!important; width:1620px}

     .t_i_h table{width:1600px;}

     .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}

     .cc{width:100%; height:435px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}

     .cc table{width:1600px; }

     .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}

锁定TABLE的首行和首列的更多相关文章

  1. StringGrid 实例1：初始化StirngGrid的首行和首列

    实例1:初始化StirngGrid的首行和首列

  2. excel同时冻结首行和首列怎么操作

    之前ytkah只知道excel可以冻结首行或首列,但还不清楚如何同时冻结excel首行和首列,后面看到小C的报表,问了他才明白怎么操作. 首先,我们先把选中B2单元格,点击导航菜单的“视图” - “冻 ...

  3. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  4. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  5. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  6. SQL 汉字转换成拼音首字母 首字母查

    -- ============================================= -- 功能:汉字转换成拼音首字母 首字母查 -- ========================== ...

  7. Jqeury获取table当前行与指定列

    今天遇到了一个Jqeury获取table当前行与指定列的问题: 大概的实现要求是一个页面中,上面有几个input输入框,下面有一个table,当在输入框中输入内容的时候,点击添加按钮的时候,在下面ta ...

  8. WPF Datagrid 控制 第一行和第一列之间的空白

    原文:WPF Datagrid 控制 第一行和第一列之间的空白 这个位置就是 这里 我们更改 DataGridControltemplate 模板 看树形结构 里面是一个BUtton 功能是全选 能找 ...

  9. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

随机推荐

  1. 消除a标签点击后产生的虚线框

    为a标签添加这条属性: a:focus {outline:none;-moz-outline:none;}

  2. ORACLE存储过程创建失败，如何查看其原因

    工作中用SQL Server比较多,Oracle可以说是小白,最近想用存储过程来完成单据复制的功能,结果遇到各种问题,其实都是非常简单的问题,但是对我来说还是花了很多时间来解决,浪费这些时间非常不值得 ...

  3. Shell使用技巧

    巧用定界符delimiter 输入大段文本的地方 自动选择和输入的地方 访问数据库 Angel@DESKTOP-254LBLA ~ $ cat > out.txt << EOF &g ...

  4. C++关于文件的读写（续）

    上次,我们探讨了C++关于文件的读操作,这次继续写操作.写,顾名思义,就是把我们自己的东西放到文件中去. 我们举一个简单的例子,就不在乎它的排版问题了. #include<iostream> ...

  5. C# 反转字符串方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 反转字符 ...

  6. 阿里云 centos 安装apache和php

    mysql使用阿里云的rds httpd服务 1. 安装apr和apr-util 2. 安装 httpd apache.org,apr.apache.org 安装命令: ./configure --p ...

  7. [PL/SQL] 如何规避异常ORA-01403

    如果mytable表中不存在 ID = 123 的数据,那么 SELECT Flag INTO flag FROM mytable WHERE ID = 123 将抛出异常ORA-01403 SELE ...

  8. c# 筛选进程命令行,得其ProcessId(唯一标示符,简称pid),再通过pid结束进程

    不说别的,上代码 部分using: using System.Diagnostics; using System.Management; 其中要引用System.Management 1.通过筛选Co ...

  9. Redis第一篇（Redis单机版本安装及启动）

    安装: 1 2 3 4 5 [root@M2_Redis1 ~]# yum install gcc gcc-c++     (安装依赖) [root@M2_Redis1 tools]# wget ht ...

  10. android调用系统相机并获取图片

    如果不是特别的要求,通过拍照的方式取得图片的话,我们一般调用系统的拍照来完成这项工作,而没必要再自己去实现一个拍照功能.调用系统相机很简单,只需要一个intent就可以跳转到相几界面,然后再通过onA ...