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. 安卓代码覆盖率:android studio+ gradle+jacoco

    在工程的oncreate()方法添加如下代码,目的是创建ec文件. String DEFAULT_COVERAGE_FILE_PATH = "/mnt/sdcard/coverage.ec& ...

  2. git资料图

  3. opencv 处女作

    显示一幅图:主要是运用功能:imread namedWindow imshowimread:从字面意思我们就可以看懂,用来读取图片的:namedWindow:显然,我们也可以看到这是用来命名窗口名称的 ...

  4. 快快快！27个提升效率的iOS开源库推荐

    文章来源:http://www.csdn.net/article/2015-07-21/2825264-27-ios-open-source-libraries/1 我热爱开源,更喜爱那些花费宝贵的业 ...

  5. 一点一滴学shell

    1. 获取shell脚本的名称 ${BASH_SOURCE-$0} 2. 获取shell脚本的路径 dirname "${BASH_SOURCE-$0}" 这个路径不一定是脚本的真 ...

  6. create()创建的控件不能映射消息函数的解决

    有时,使用create()在运行时创建的控件不能将消息映射到父窗口内,此时需要使用消息转发的机制,主要原理:注册一个全局的消息,针对接收消息的控件编写继承类,在该继承类中响应消息,并将已注册的全局消息 ...

  7. 1074. Reversing Linked List (25)

    模拟题,注意当k == 1 与 k == n时情况 #include <stdio.h> #include <string.h> #include <iostream&g ...

  8. mysql用户的创建

    MySQL是采用c/s方式的,需要客户端登录服务器,那么可以登录账号叫做用户,这些用户的信息都存储在mysql数据库(mysql安装时默认有的一个数据库)中的user表中, 比如用户的名称,用户的密码 ...

  9. wifi,网关相关标识的获取

    获取WIFI的相关信息 - (void)getWifiInfo { NSArray *ifs = (__bridge_transfer NSArray *)CNCopySupportedInterfa ...

  10. BZOJ1742[Usaco2005 nov]Grazing on the Run

    Description John养了一只叫Joseph的奶牛.一次她去放牛,来到一个非常长的一片地,上面有N块地方长了茂盛的草.我们可 以认为草地是一个数轴上的一些点.Joseph看到这些草非常兴奋, ...