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. Codeforces Round #525 (Div. 2)题解

    Codeforces Round #525 (Div. 2)题解 题解 CF1088A [Ehab and another construction problem] 依据题意枚举即可 # inclu ...

  2. List<Map<String, Obejct>>遍历

    List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); Map&l ...

  3. laravel-china 镜像停止服务

    php 的很多开发都会用到composer.然后国内的镜像又慢,很多人会选择用laravel-china的镜像. 之前一直用的很好.今天突然发现不能composer update.出现报错.WTF!! ...

  4. spark常见错误【持续更新】

    错误1.错误: 找不到或无法加载主类 idea.scala代码 idea 导入的scala工程,编写代码后报该错误. 原因:\src\main\scala 包路径下没有将scala这个包设置成Sour ...

  5. yarn 强制孙依赖的版本

    今天博主遇到一个棘手的问题,@vue/cli-service 依赖了一个包 portfiner@^1.0.20,但是 2 天前,这个包更新到了1.0.22,带来了一些问题. 博主第一反应就是想 yar ...

  6. shiro 配置注解后无权访问不进行页面跳转异常：org.apache.shiro.authz.UnauthorizedException: Subject does not have permission

    该问题需要使用异常管理: <!-- 无权访问跳转的页面 --> <bean class="org.springframework.web.servlet.handler.S ...

  7. [bzoj 5143][Ynoi 2018]五彩斑斓的世界

    传送门 Descroption 给了你一个长为n的序列a,有m次操作 1.把区间[l,r]中大于x的数减去x 2.查询区间[l,r]中x的出现次数 Solution 分块 对于每个块,我们都分别维护: ...

  8. 作妖 | "该文件没有与之关联的程序来执行该操作..."的解决方法（删除快捷方式小箭头所致）

    文章目录 开始作妖 后悔作妖 终结作妖 开始作妖 这是次很作妖的体验过程.因为重新换了个系统,看着桌面上这些快捷方式都有个讨人嫌的小箭头,就在网上搜了搜解决办法. 比如,将下面的内容复制到记事本中,再 ...

  9. Laravel 加载第三方类库的方法

    有很多第三方的类库并没有制作 Composer,而是还以 require 的方式进行加载.对于此类的类库 在 Laravel 框架中建立存放第三方的 SDK 目录 app/Libs/* 修改 comp ...

  10. 微信小程序里自定义组件，canvas组件没有效果

    methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...