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. 洛谷 UVA10298 Power Strings 题解

    Analysis 结论:设字符串长度为n,最长相同前后缀的长度为kmp[i],如n%(n-kmp[n])=0,则答案为n/(n-kmp[n]),否则为1. 如果循环节多于一个,以前n-kmp[n]个为 ...

  2. 后缀数组 1031: [JSOI2007]字符加密Cipher

    /*1031: [JSOI2007]字符加密Cipher Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4926 Solved: 2020[Submit ...

  3. 【原创】go语言学习（十）Map类型

    目录 声明和初始化 基本操作 map排序 map类型的切⽚片 课后作业 声明和初始化 1.map类型是⼀一个key-value的数据结构. //var a map[key的类型]value类型 var ...

  4. WebSocket浅谈

    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速 ...

  5. Go by Example-Switch分支结构

    上一节提到了Go语言中的if/else结构,但是条件过多的时候就不适合用if语句了,这个时候我们就可以使用switch语句了. 基本特性 switch 是一个条件语句,用于将一个表达式的求值结果与可能 ...

  6. kafka 45个题目介绍

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

  7. Chrome接口调试工具

    网页接口测试工具开发背景 在web开发中,服务器端和客户端的开发和测试必不可少,但是测试的工作往往需要服务器端完成之后,客户端才能进行测试,这无疑延后了测试流程,导致服务器端开发完成后,无法进行充分的 ...

  8. docker.socks vul

    在容器上获取 RCE 1)列出所有容器 第一步是获取主机上所有容器的列表.为此,你需要执行以下http请求: GET /containers/json HTTP/1.1 Host: <docke ...

  9. 如果项目在IIS发布后，出现System.ComponentModel.Win32Exception: 拒绝访问。

    如果项目在IIS发布后,出现System.ComponentModel.Win32Exception: 拒绝访问. 那么就试试下面的办法. 步骤如下: 应用程序池=>设置应用程序池默认设置 将标 ...

  10. Macbook上打开多个终端的方法

    方法有如下两种 1.首先是的焦点在终端上(使用鼠标点击下终端).然后使用快捷键command+N 即可得到另一个终端界面. (如果现在光标的焦点在浏览器上,那么就是新打开一个浏览器窗口) 2.同样,光 ...