文章来源于：https://www.cnblogs.com/dacuotecuo/p/3657779.html，请尊重原创，转载请注明出处。

说明：这里主要实现了表头的固定和上下滚动的滑动实现；时间的原因未对左右滑动进行实现学习和总结，后续会对左右滑动进行实现。

一、先上代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>表格头部固定</title>

        <style type="text/css">

            .table-head table,.table-body table{width:100%;border-collapse:collapse;}

            .table-head{padding-right:17px;background-color:#999;color:#000;}

            .table-body{width:100%; height:300px;overflow-y:auto;}

            .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

            .table-body table tr td{

                border:1px solid red;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div style="width:100%;">

            <div class="table-head">

                <table>

                    <colgroup><col span="2" style="width: 100px;" /><col /></colgroup>

                    <thead>

                        <tr>

                            <th>序号</th>

                            <th>内容</th>

                        </tr>

                    </thead>

                </table>

            </div>

            <div class="table-body">

                <table>

                    <colgroup><col span="2" style="width: 100px;" /><col /></colgroup>

                    <tbody>

                        <tr><td>1</td><td>我只是用来测试的</td></tr>

                        <tr><td>2</td><td>我只是用来测试的</td></tr>

                        <tr><td>3</td><td>我只是用来测试的</td></tr>

                        <tr><td>4</td><td>我只是用来测试的</td></tr>

                        <tr><td>5</td><td>我只是用来测试的</td></tr>

                        <tr><td>6</td><td>我只是用来测试的</td></tr>

                        <tr><td>7</td><td>我只是用来测试的</td></tr>

                        <tr><td>8</td><td>我只是用来测试的</td></tr>

                        <tr><td>9</td><td>我只是用来测试的</td></tr>

                        <tr><td>10</td><td>我只是用来测试的</td></tr>

                        <tr><td>11</td><td>我只是用来测试的</td></tr>

                        <tr><td>12</td><td>我只是用来测试的</td></tr>

                        <tr><td>13</td><td>我只是用来测试的</td></tr>

                        <tr><td>14</td><td>我只是用来测试的</td></tr>

                        <tr><td>15</td><td>我只是用来测试的</td></tr>

                    </tbody>

                </table>

            </div>

        </div>

    </body>

</html>

二、演示：

序号 内容
1 我只是用来测试的
2 我只是用来测试的
3 我只是用来测试的
4 我只是用来测试的
5 我只是用来测试的
6 我只是用来测试的
7 我只是用来测试的
8 我只是用来测试的
9 我只是用来测试的
10 我只是用来测试的
11 我只是用来测试的
12 我只是用来测试的
13 我只是用来测试的
14 我只是用来测试的
15 我只是用来测试的

三、注意：

其实关键之处在于

1、使用了colgroup标签，来对上下两个表格的列宽进行了定义，让他们保持一致。

2、上边的div .table-head添加了样式padding-right:17px，这个宽度是为了保证跟下边的div .table-body的滚动条保持一致，同时下边的表格.table-body添加了样式overflow-y:scroll;

只要保证上述两点的话，你也可以做出固定表头的表格来，同时不会发生上下的列不对齐的问题，屡试不爽！

前端html之------>Table实现表头固定的更多相关文章

  1. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  2. html Table实现表头固定

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

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

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

  4. css手写一个表头固定

    Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...

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

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

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

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

  7. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

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

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

  9. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

随机推荐

  1. 学习EXTJS6（4）基本功能-信息提示框组件

    1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...

  2. 读取com口接收byte数据的处理

    procedure Tfrm_CheckCloth.cnrs232ReceiveData(Sender: TObject; Buffer: Pointer; BufferLength: Word); ...

  3. springMVC知识点复习

    @ResponseBody和@RequestBody的使用 <html> <script type="text/javascript" src="rel ...

  4. Photoshop教程

    Photoshop百科 Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件. Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图 ...

  5. [bzoj5118]Fib数列2_费马小定理_矩阵乘法

    Fib数列2 bzoj-5118 题目大意:求Fib($2^n$). 注释:$1\le n\le 10^{15}$. 想法:开始一看觉得一定是道神题,多好的题面啊?结果...妈的,模数是质数,费马小定 ...

  6. Linux文件查找命令find（转）

    Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录 ...

  7. C#趣味程序----分数之和

    问题:求这种四个自然数p,q,r,s(p<=q<=r<=s).使得等式1/p + 1/q +1/r +1/s=1成立. 分析:将原式同分,化简整理后得到:2<=p<5,p ...

  8. HTML5的data-*自己定义属性

    HTML5添加了一项新功能是自己定义数据属性.也就是data-*自己定义属性.在HTML5中我们能够使用以data-为前缀来设置我们须要的自己定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本 ...

  9. pom.xml出现web.xml is missing and <failOnMissingWebXml> is set to true解决方案

    提示信息应该能看懂.也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了. 搜索了一下,Stack Overflow上的答案解决了问题,分享一下. ...

  10. vim分屏功能

    转载,来自http://coolshell.cn/articles/1679.html 本篇文章主要教你如何使用 Vim 分屏功能. 分屏启动Vim 使用大写的O参数来垂直分屏. vim -On fi ...