<!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. HTML5元素2

    用于分组的元素 元素 说明 类型 HTML5与其他的变化 blockquote 表示引自他处的大段内容 流 无变化 dd 用在dl元素之中,表示定义 无 无变化 div 一个没有任何既定语义的通用元素 ...

  2. 《精通Python设计模式》学习结构型之装饰器模式

    这只是实现了Python的装饰器模式. 其实,python的原生的装饰器的应用比这个要强,要广的. ''' known = {0:0, 1:1} def fibonacci(n): assert(n ...

  3. USACO 5.2 Snail Trails

    Snail TrailsAll Ireland Contest Sally Snail likes to stroll on a N x N square grid (1 <n <= 12 ...

  4. USACO 4.3 Buy Low, Buy Lower

    Buy Low, Buy Lower The advice to "buy low" is half the formula to success in the stock mar ...

  5. Kafka/Metaq设计思想学习笔记

    http://my.oschina.net/geecoodeer/blog/194829

  6. Python学习之字符串格式化

    Table 3.1. 字符串格式化代码 格式 描述 %% 百分号标记% %c 字符及其ASCII码 %s 字符串 %d 有符号整数(十进制) %u 无符号整数(十进制) %o 无符号整数(八进制) % ...

  7. Ionic实战九：ionic视频播放

    本模板和以前的方式不同,采用的是 iframe方式引入的视频,如下代码:       

  8. thinphp中volist嵌套循环时变量$i 被污染问题,key="k"

    默认是$i,但是嵌套循环是使用$i,默认的变量$i就会被污染.可以自定义设置变量key="k" k任意. 用 key="k" 代替默认的 $i 1 2 3 4 ...

  9. 设置 cookie过期时间

    cookie.setMaxAge(0);//不记录cookie cookie.setMaxAge(-1);//会话级cookie,关闭浏览器失效 cookie.setMaxAge(60*60);//过 ...

  10. 远程连接mysql root账号报错：2003-can't connect to MYSQL serve

    1.远程连接Linux系统,登录数据库:mysql -uroot -p(密码) 2.修改root账号的设置: GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDE ...