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. 07-JAVA继承与接口

    动手动脑: 源程序: public class FuGai { public static void main(String[] args) { // TODO Auto-generated meth ...

  2. [转] Oracle数据库备份与恢复 - 增量备份

    转:http://blog.csdn.net/pan_tian/article/details/46780929   RMAN一个强大的功能是支持增量备份,增量备份中心思想就是减少备份的数据量,我们不 ...

  3. 20145226夏艺华 《Java程序设计》第0周学习总结

    关于师生关系: 学生和老师之间我觉得关系时多元化的,不能拘泥于单独的一种关系:灌输与被灌输,教授与被教授--我认为,在不同的课程阶段,师生之间的关系都可以发生变化.前期的老师更像是一个指路的人,而在入 ...

  4. [game]十字链表的AOI算法实现

    AOI主要有九宫格.灯塔和十字链表的算法实现.本文阐述十字链表的实现和尝试. 1. 基本原理 根据二维地图,将其分成x轴和y轴两个链表.如果是三维地图,则还需要维护多一个z轴的链表.将对象的坐标值按照 ...

  5. Linq To Nhibernate 性能优化（入门级）

    最近都是在用Nhibernate和数据库打交道,说实话的,我觉得Nhibernate比Ado.Net更好用,但是在对于一些复杂的查询Nhibernate还是比不上Ado.Net.废话不多说了,下面讲讲 ...

  6. 云存储的那些事（2）——数据分布算法CRUSH

    在分布式系统中,数据最终还是要存储到物理设备上的,ceph的底层设备抽象角色是OSD,那么数据是如何被决定放在哪块OSD上的,答案就是CRUSH算法. 关键字:CRUSH.一致性hash.ceph数据 ...

  7. getElementsByTagName获得的不是数组的问题！

    getElementsByTag() returns a NodeList instead of an Array. You can convert a NodeList to an Array bu ...

  8. Hadoop2.6.0的FileInputFormat的任务切分原理分析（即如何控制FileInputFormat的map任务数量）

    前言 首先确保已经搭建好Hadoop集群环境,可以参考<Linux下Hadoop集群环境的搭建>一文的内容.我在测试mapreduce任务时,发现相比于使用Job.setNumReduce ...

  9. 选择HttpHandler还是HttpModule？

    阅读目录 开始 理解ASP.NET管线 理解HttpApplication 理解HttpHandler 理解HttpModule 三大对象的总结 案例演示 如何选择? 最近收到几个疑问:HttpHan ...

  10. 14.Xcode8imageview图片圆角不显示的bug

    第一种方法: 在imageView调用clipToBounds的之前,[super awakeFromNib]之后,加上[self.contentView layoutIfNeeded];就可以了,反 ...