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. jquery each遍历节点使用

    ---恢复内容开始--- $("#aaa :input[type='text']").each(function(i){     alert(this.value); this.v ...

  2. WIN32_LEAN_AND_MEAN宏

    网上说: 不加载MFC所需的模块. 用英语解释:Say no to MFC 如果你的工程不使用MFC,就加上这句,这样一来在编译链接时,包括最后生成的一些供调试用的模块时,速度更快,容量更小. 我们经 ...

  3. Nginx-->基础-->理论-->002:Nginx进程介绍

    一.Nginx进程介绍

  4. python课程第四周重点记录

    1.迭代器 names = iter(["alex","jack","rain"]) #声明列表的一个迭代器 names.__next__( ...

  5. 不容错过！2016年度优秀UI/UX设计文章

    本文整理了一些2016年度最受欢迎的文章,例如有关UI / UX设计的理论知识,书籍和工具,如何做出更好的设计的方法和建议,以及新的设计趋势. 1. 2017年用户体验设计趋势 我们期待着2017年用 ...

  6. oracle 创建用户和imp指定表空间

    创建用户: 1,sqlplus sys/pwd as sysdba; 2, create user username identified by password; 3, grant dba,conn ...

  7. TColor 与 RGB 的转换函数

    function RGB2TColor(const R, G, B: Byte): Integer;begin  // convert hexa-decimal values to RGB  Resu ...

  8. UIScrollView的三个属性

    contentSize.contentOffset.contentInset   UIScrollView的frame的size 指的是可视范围   contentSize  内容大小,滚动的范围 创 ...

  9. 解析 Json 相关

    statusJson sj = new statusJson() { ShipmentNum = "555555", Status1 = "05", Wareh ...

  10. 树型dp

    树形dp主要有两种,比较重要的共同点就是要想全所有情况. [一] 第一种是简单的父子关系型,即动规只与一个节点和它的子节点有关. [例]codevs1380没有上司的舞会: 有个公司要举行一场晚会.为 ...