<!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>

最新文章

  1. 不修改代码就能优化ASP.NET网站性能的一些方法
  2. Malformed \uxxxx encoding解决方法
  3. Oracle数据库字符集修改
  4. 多线程之NSThread和NSObject
  5. uva 11076
  6. 浅析作用域链–JS基础核心之一
  7. 让IE支持CSS3 Media Query实现响应式Web设计
  8. LINQ to SQL的一些简单用法
  9. fragment 中利用spinner实现省市联动
  10. Python基础-注释-变量赋值
  11. 在新获取git中项目时出现的问题汇总
  12. 第16月底18天 phpstudy设置
  13. 2018.08.10 atcoder No Need（线性dp）
  14. C# 连接Paradox DB
  15. 单纯用JS做的分页插件
  16. MySQL学习之——锁（转）
  17. iOS 截屏，openGL ES 截图，以及像素颜色判断
  18. CentOS6.5安装mysql-5.7.18-1.el6.x86_64.rpm-bundle.tar
  19. 利用Django中间件middleware解决用户未登录问题（转）
  20. 常用模块一（random模块、time模块、sys模块）

热门文章

  1. #Git 详细中文安装教程
  2. 旁门左道通过JS与纯CSS实现显示隐藏层
  3. USACO 6.3 Fence Rails（一道纯剪枝应用）
  4. 移动端自动化测试（二）之 Appium常用的API（python）函数介绍
  5. Kubernetes(k8s)集群部署（k8s企业级Docker容器集群管理）系列之自签TLS证书及Etcd集群部署（二）
  6. 树莓派与微信公众号对接（python）
  7. iOS 9应用开发教程之使用代码添加按钮美化按钮
  8. 1012 The Best Rank (25)（25 point(s)）
  9. BZOJ 2333: [SCOI2011]棘手的操作 可并堆 左偏树 set
  10. linux中的文件编码及编码修改