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. KindEditor3.x-自动上传Word图片功能.

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  2. 运行级别 runlevel

    linux默认有7个等级,从0到6 0 关机 1 单用户模式,系统出现问题是可使用该模式进入系统.例如完了root密码,就可以使用1进入系统修改root密码 2 多用户模式,没有网络连接 3 完全多用 ...

  3. iSCSI引入FC/SAN

    由 cxemc 在 2013-9-24 上午9:10 上创建,最后由 cxemc 在 2013-9-24 上午9:10 上修改 版本 1 集成iSCSI 和FC SAN有五种常见的方法,各有优缺,适应 ...

  4. xshel链接linuxl安装nginx

    原文链接:https://blog.csdn.net/Sweet__dream/article/details/78256952?utm_source=blogxgwz9 这个连接更详细:https: ...

  5. Hadoop mapreduce过程分析

    原理图: 中间结果的排序与溢出(spill)流程图 map分析: (1).输入分片(input split):在进行mapreduce之前,mapreduce首先会对输入文件进行输入分片(input ...

  6. json页面解析

    List<TjfxDTO> cyjbList = new ArrayList<TjfxDTO>(); cyjbList=tjfxService.cyjb_wcjd(tjfxDT ...

  7. MovingWallVelocity边界条件【翻译】

    翻译自:CFD-online 帖子地址:http://www.cfd-online.com/Forums/openfoam-solving/59646-movingwallvelocity-bound ...

  8. 20175234 2018-2019-2 《Java程序设计》第十周学习总结

    目录 20175234 2018-2019-2 <Java程序设计>第十周学习总结 教材学习内容总结 12.1进程与线程 12.2 Java中的线程 12.3 Thread类与线程的创建 ...

  9. SQL-W3School-函数：SQL COUNT() 函数

    ylbtech-SQL-W3School-函数:SQL COUNT() 函数 1.返回顶部 1. COUNT() 函数返回匹配指定条件的行数. SQL COUNT() 语法 SQL COUNT(col ...

  10. Linux系列之——tomcat 的开机自启动

    --未验证 每次开机都要启动tomcat,非常麻烦:通过直接修改系统文件,实现tomcat自启动: 1. 修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自 ...