<!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. Linux 的软件安装目录

    Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系统级的目录,可以理解为C:/Windows/,/usr/lib理解为C:/Windows/System32. / ...

  2. atomikos + druid 连接超时失效

    atomikos + druid 连接超时失效,需要多次连接才能成功. 首次连接会报异常: 2018-01-08 16:58:12 DEBUG [com.jpcar.model.dao.jpcar.A ...

  3. Django实战（10）：单元测试

    尽早进行单元测试(UnitTest)是比较好的做法,极端的情况甚至强调“测试先行”.现在我们已经有了第一个model类和Form类,是时候开始写测试代码了. Django支持python的单元测试(u ...

  4. oracle中vsize和length

    其实LENGTH与VSIZE这两个函数联系不大,区别很大.虽然都是“取长度”,但是LENGTH函数结果是“有多少个字符”,VSIZE结果是“需要多少bytes”.简单看一下这两个函数. 1.创建表T并 ...

  5. thinkphp 5.0如何实现自定义404（异常处理）页面

    404页面是客户端在浏览网页时,由于服务器无法正常提供信息,或是服务器无法回应,且不知道原因所返回的页面.404承载着用户体验与SEO优化的重任.404页面通常为用户访问了网站上不存在或已删除的页面, ...

  6. 《Android源码设计模式》--抽象工厂模式

    No1: 4种MediaPlayer Factory分别会生成不同的MediaPlayer基类:StagefrightPlayer.NuPlayerDriver.MidiFile和TestPlayer ...

  7. 决策树算法（Bagging与随机森林）

    Bagging算法: 将训练数据集进行N次Bootstrap采样得到N个训练数据子集,对每个子集使用相同的算法分别建立决策树,最终的分类(或回归)结果是N个决策树的结果的多数投票(或平均). 其中,B ...

  8. Java 中的浮点数取精度方法

    Java 中的浮点数取精度方法 一.内容 一般在Java代码中取一个double类型的浮点数的精度,四舍五入或者直接舍去等的方式,使用了4种方法,推荐使用第一种,我已经封装成工具类了. 二.代码实现 ...

  9. [UOJ430]line

    首先有个暴力DP,设$s_i=\sum\limits_{j\geq i}w_j$,有$f_i=\min\limits_{l_i\lt j\leq i}f_{j-1}+s_{i+1}\max\{t_{j ...

  10. 谁是最快的Go Web框架

    根据Julien Schmidt测试框架中测试到的go web框架,在加上lion,fasthttp,一共测试了下面的web框架. default http macaron go-json-rest ...