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. Java CopyOnWriteArrayList

    1. 为什么需要 CopyOnWriteArrayList ArrayList 的内部实现是一个数组, 并且是动态扩容的, 当插入数据时, 先判断数组是否需要扩容, 如果需要扩容, 则先扩容, 再插入 ...

  2. 记录Qt的一个诡异Bug

    公司的一款项目,在迭代开发阶段,突然发现运行速度越来越慢,界面切换卡顿时间在2秒以上.经过和某个不卡版本的对比,惊奇的发现程序二进制都一模一样,就几个图片资源和脚本不一样.经过差不多一天的排查,发现是 ...

  3. Linux下Java安装与配置

    一.卸载系统自带的JDK 如果Linux已经自带OpenJdk,我们需要将它卸载掉,否则可以直接[安装JDK] 查看Linux自带的JDK是否已安装,输入如下命令查看JAVA版本信息. java -v ...

  4. 在Visual Studio 2012 Blue theme下使用Dark theme的文本编辑器颜色设置

    Visual Studio 2012 默认提供了3种color theme: blue,light,和dark.其中dark的文本编辑器颜色设定很爽,可是整个菜单项加上一些小的窗口如Find Resu ...

  5. 第一课1、ROS

    ---恢复内容开始--- 1.什么是ROS ROS起源于2007年,斯坦福大学的人工智能实验室与机器人技术公司Willow Garage针对其个人机器人项目开发了ROS的雏形. ROS大致每年发布一个 ...

  6. html总集

    3.1清单格式:<ul> <li>...</li></ul><li>的属性:type disc 实心圆(默认) circle 空心圆 squ ...

  7. php生成器的使用

    按照php的文档说明 一个生成器函数看起来像一个普通的函数,不同的是普通函数返回一个值,而一个生成器可以yield生成许多它所需要的值. 当一个生成器被调用的时候,它返回一个可以被遍历的对象.当你遍历 ...

  8. iOS：小技巧（转）

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: 1 2 UIWindow * window=[[[UIApplication sharedApplicat ...

  9. action func用法记记

    public partial class Form1 : Form { public Form1() { InitializeComponent(); } public delegate void s ...

  10. error while performing database login with the xxx driver

    在MyEclipse的安装路径下D:\Program Files\MyEclipse 6.0\eclipse下面找到eclipse.ini文件,用记事本打开 eclipse.ini文件 -showsp ...