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. Cogs 329. K- 联赛(最大流)

    K- 联赛 ★★★ 输入文件:kleague.in 输出文件:kleague.out 简单对比 时间限制:1 s 内存限制:32 MB [问题描述] K- 联赛职业足球俱乐部的球迷们都是有组织的训练有 ...

  2. python循环导入的问题

    1.问题 循环导入,代码如下: from c import c def b(): print('b') b.py from b import b def a(): # from b import b ...

  3. 一些scala的操作

    Scala获取当前目录下所有文件 import java.io.File //获取目录下的所有文件,当前项目目录输入new File(".") def getFiles1(dir: ...

  4. vue+elementui 开发的网站IE浏览器加载白屏（不兼容）解决办法

    1.需要检查一下 export default { name: 'aa',-------vue的name是不可以重复的-----这个是决定性原因 data() { return {} } 2.变量声明 ...

  5. Spring MVC 三大组件

    ㈠ HandlerMapping 处理器映射(一般通过扫描包配置) 通过处理器映射,你可以将Web 请求映射到正确的处理器 Controller 上.当接收到请求时,DispactherServlet ...

  6. Eclipse简明使用教程(java集成开发环境）

    说明:我使用的是绿色便携版的Eclipse,免安装,解压就能用.链接:https://download.csdn.net/download/loongstyle/10700321 1_Eclipse中 ...

  7. 2018-2019-2 网络对抗技术 20165231 Exp 8 Web基础

    实验内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. (2).Web前端javascipt(0 ...

  8. ngx.shared.DICT.get 详解

    ngx.shared.DICT.get 原文: ngx.shared.DICT.get syntax: value, flags = ngx.shared.DICT:get(key) context: ...

  9. CSS中的cursor属性

    css中的cursor这个属性是用来设置光标形状的. 这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状. 默认值:auto 继承性:yes 出现版本:css2 JavaScript语法: ...

  10. What is the use of c# “Yield” keyword ?

    What is the use of c# “Yield” keyword ? “Yield keyword helps us to do custom stateful iteration over ...