<!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>表头列头固定</title>

<style>

    body{font-size:12px;}

    .t_n{width:30px; heihgt: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: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:200px!important; height:208px; overflow-y:hidden;} 

    .t_i{width:400px; 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>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>

            </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 width="10%">栏目A</td>

               <td width="20%">栏目B</td>

               <td width="10%">栏目C</td>

               <td width="20%">栏目D</td>

               <td width="20%">栏目E</td>

               <td width="20%">栏目F</td>

             </tr>

            </table>

        </div>

    </div>

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

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

            <tr>

                <td width="10%">1</td>

                <td width="20%">1</td>

                <td width="10%">1</td>

                <td width="20%">1</td>

                <td width="20%">1</td>

                <td width="20%">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>

        </table>

    </div>

</div>

</body>

</html>

table固定首行(二)的更多相关文章

  1. table固定首行(一)

    <html> <head> <title>Untitled Document</title> <meta http-equiv="Con ...

  2. vue table 固定首列和首行

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  3. js div及table首行顶部吸附示例

    js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...

  4. Java读取excel指定sheet中的各行数据，存入二维数组，包括首行,并打印

    1. 读取 //读取excel指定sheet中的各行数据,存入二维数组,包括首行 public static String[][] getSheetData(XSSFSheet sheet) thro ...

  5. npoi实现 从固定的行读取数据作为表头并返回datable

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. HTML5 的段落首行缩进

    text-indent:0em;表示当前行不需要缩进,文本顶头开始.这个属性可以用在  div  p等元素下面 文本首行的缩进(在首行文字之前插入指定的长度) p { line-height: 2em ...

  7. div+CSS实现段落首行缩进两个字符

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  8. WordPress文章首行缩进

    WordPress后台编辑文章的时候会自动删除多余的空格,也就是说,你在后台编辑文章的时候添加的一些空格和换行在前台都是看不见的,都是被WordPress忽略了的,今天就讲讲怎么给所有文章添加首行缩进 ...

  9. 关于css的text-indent首行缩进两个字符和图片缩进的问题

    段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...

随机推荐

  1. android发布版本的几个命令

    ./build_native.sh /opt/software/apache-ant-1.8.2/bin/ant clean #/opt/software/apache-ant-1.8.2/bin/a ...

  2. Android Studio3.x新的依赖方式（implementation、api、compileOnly）

    https://blog.csdn.net/yuzhiqiang_1993/article/details/78366985?locationNum=6&fps=1 Android Studi ...

  3. Hive SQL综合案例

    一 Hive SQL练习之影评案例 案例说明 现有如此三份数据:1.users.dat 数据格式为: 2::M::56::16::70072, 共有6040条数据对应字段为:UserID BigInt ...

  4. 使用ASP.NET MVC+Entity Framework快速搭建系统

    详细资料: http://www.cnblogs.com/dingfangbo/p/5771741.html 学习 ASP.NET MVC 也有一段时间了,打算弄个小程序练练手,做为学习过程中的记录和 ...

  5. Python 笔记（一）字典与json使用及注意点

    个人笔记系列,随便参考 1.python 中字典与json的差别 字典的生成 >>> a = dict(one=1, two=2, three=3) >>> b = ...

  6. 牛客练习赛3 E - 绝对半径2051

    链接:https://www.nowcoder.net/acm/contest/13/E来源:牛客网 题目描述

  7. MSTP多生成树的配置

    STP的不足 STP协议虽然能够解决环路问题,但是由于网络拓扑收敛较慢,影响了用户通信质量 而且如果网络中的拓扑结构频繁变化,网络也会随之频繁失去连通性,从而导致用户通信频繁中断 RSTP对STP的改 ...

  8. eNSP仿真学习和VLAN配置

    路由&交换机基本命令 sys #切换到系统视图(修改配置),Ctrl+Z 返回用户视图 sysname SW1 #设备重命名为SW1 int g0/0/1 #进入接口视图 VLAN配置 首先连 ...

  9. 为什么Android手机总是越用越慢？

    根据第三方的调研数据显示,有77%的Android手机用户承认自己曾遭遇过手机变慢的影响,百度搜索“Android+卡慢”,也有超过460万条结果.在业内,Android手机一直有着“越用越慢”的口碑 ...

  10. hdu 3308 线段树

    题目大意:给n个数,两种操作1:U  a b   更新第a个为b (从0开始)2: Q    a ,b  查询 a,b之间LCIS(最长连续递增子序列)的长度. Sample Input110 107 ...