<!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. Java语法知识总结

    一:java概述: 1991 年Sun公司的James Gosling等人开始开发名称为 Oak 的语言,希望用于控制嵌入在有线电视交换盒.PDA等的微处理器: 1994年将Oak语言更名为Java: ...

  2. [翻译]Gulp.js简介

    我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新 ...

  3. 8-8 Ddfense Line uva1471 优先级队列

    题意:给你一串长度为n的序列   你的任务是删除一个连续的子序列  使得剩下的序列中有一个长度最大的连续递增子序列  例如  将 5 3 4 9 2 8 6 7 1 中的9 2 8 删除  得到5 3 ...

  4. （转）最短路算法 -- Floyd算法

    转自:http://blog.51cto.com/ahalei/1383613        暑假,小哼准备去一些城市旅游.有些城市之间有公路,有些城市之间则没有,如下图.为了节省经费以及方便计划旅程 ...

  5. Ionic入门九：颜色

    ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色. <ul class="list color-list-demo"> <li class=& ...

  6. 成为IT经理必备的十大能力 不只是技术！

    对于一个IT从业者,让你谋得工作的也许是技术能力,但有助于提升职业生涯的却是软技能.步步高升的人都是那些发表文章.在会议上积极发言以及关注客户的员工(程序员).与此同时,通常情况下,企业CIO或多或少 ...

  7. Xiaoguang Tu's Home Page

    Xiaoguang Tu (涂晓光): CV: Ph.D. Candidate of School of Communication and Information Engineering, Univ ...

  8. iuap

    2017.12 用友今年着力点往云平台发展,是时候整理一下思路 第一:iuap 第二:Linux 第三:财务会计业务入门 第四:NC节点视频教程--财务模块 2019年3月4日 all in iuap ...

  9. Eclipse导入SVN项目的三种方式

    Eclipse导入SVN项目的三种方式 一.直接Import导入: 1.点击 File --> Import,进入导入项目窗口 2.选择从SVN检出项目,点击Next 3.选择创建新的资源库位置 ...

  10. LOJ.2587.[APIO2018]铁人两项Duathlon(圆方树)

    题目链接 LOJ 洛谷P4630 先对这张图建圆方树. 对于S->T这条(些)路径,其对答案的贡献为可能经过的所有点数,那么我们把方点权值设为联通分量的大小,可以直接去求树上路径权值和. 因为两 ...