table的表头固定的HTML代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>固定表头可以纵向滚动的html表格</title>

    <style type="text/css">

    #table_div{

        width:80%;

        margin-left: 50px;

    }

    #table_header{

        background-color: #7fffd4;

    }

    .col1,.col2,.col3{

        width: 20%

    }

    .col4{

        width:40%;

    }

    </style>

</head>

<body>

    <div id="table_div">

        <table width="100%">

            <tr id="table_header">

                <th class="col1">学号</th>

                <th class="col2">姓名</th>

                <th class="col3">年级</th>

                <th class="col4">家庭住址</th>

            </tr>

        </table>

        <div style="overflow:auto;height:100px">

            <table width="100%">

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

                <tr>

                    <td class="col1">11111111</td>

                    <td class="col2">张三</td>

                    <td class="col3">2013级</td>

                    <td class="col4">吉林省长春市前进大街2699号</td>

                </tr>

            </table>

        </div>

    </div>

</body>

</html>

效果如下图所示，其中最主要的代码是style="overflow:auto;height:100px"

学号 姓名 年级 家庭住址
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号
11111111 张三 2013级 吉林省长春市前进大街2699号

html5 table的表头固定的HTML代码的更多相关文章

  1. html Table实现表头固定

    最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...

  2. 前端html之------>Table实现表头固定

    文章来源于:https://www.cnblogs.com/dacuotecuo/p/3657779.html,请尊重原创,转载请注明出处. 说明:这里主要实现了表头的固定和上下滚动的滑动实现:时间的 ...

  3. Table实现表头固定 内容滚动

    <div style="width: 800px;"> <div class="table-head"> <table> & ...

  4. js Table冻结表头示例代码

    Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头  function  ...

  5. IE的表头固定/表头不动（使用expression）

    本文主要介绍在IE浏览器中,实现表头固定的一种方法.这种方法使用到了 IE 浏览器特有的 expression 方法. 表头固定DEMO1 主要代码: <style type="tex ...

  6. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  7. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  8. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  9. JavaScript：固定table的表头

    当表格数据很多,以致于容器块元素出现滚动条.而在滚动滚动条的时候,数据行会被块元素遮挡.若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置.下面的jsp代码可以实现表头固定, ...

随机推荐

  1. 异常：ORA-01013: 用户请求取消当前的操作

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/bnmnba/article/detail ...

  2. 关于item的prevvalue

    一个数据库大小监控项的更新周期是86400.一天,使用的最新值减去上次数值来显示变化值,一直就是10g-0 变化值为10g. 在更新时间为一天的时候prevvalue是0,不能显示上次的数值 当吧更新 ...

  3. 使用Python+selenium实现第一个自动化测试脚本

    原blog 一,安装Python. python官方下载地址:https://www.python.org/downloads/ 安装后点击开始菜单,在菜单最上面能找到IDLE. IDLE是pytho ...

  4. 传统PC机I/O位址空间范围

    空间范围是0x000--0x3FF,有1024个I/O端口位址可供使用! 使用EISA或PCI等汇流排结构的现代PC机,有64KB的I/O位址空间可供使用.在普通Linux系统下透过查看/proc/i ...

  5. manjaro 滚动更新后无法开机，Failed to start load kernel modules，nvidia驱动导致

    今天滚动后无法开机,启动时显示Faild to start load kernel modules,卡在后面无法进入登录界面 systemctl status systemd-modules-load ...

  6. QTP安装出现windoes installer不能安装升级修补程序问题

    问题如下: windoes installer不能安装升级修补程序问题 如何解决?还未找到解决方案

  7. 【原】Python基础-类

    class CPerson: name = "default" __name2 = "inaccessable name" #类作用域内的变量可以被所有实例访问 ...

  8. lucene正向索引——正向信息，Index –> Segments (segments.gen, segments_N) –> Field(fnm, fdx, fdt) –> Term (tvx, tvd, tvf)

    转自:http://www.cnblogs.com/forfuture1978/archive/2009/12/14/1623599.html 上面曾经交代过,Lucene保存了从Index到Segm ...

  9. kafka 45个题目介绍

    >1.Kafka面试问答 Apache Kafka的受欢迎程度很高,Kafka拥有充足的就业机会和职业前景.此外,在这个时代拥有kafka知识是一条快速增长的道路.所以,在这篇文章中,我们收集了 ...

  10. C++ STL介绍——简介

    目录 1.什么是STL 2.STL中六大组件 2.1 容器(Container) 2.2 迭代器(Iterator) 2.3 算法(Algorithm) 2.4 仿函数(Functor) 2.5 适配 ...