文章来源于: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. Balanced Number

    Balanced Number Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) ...

  2. CodeForces - 9B - Running Student

    先上题目: B. Running Student time limit per test 1 second memory limit per test 64 megabytes   And again ...

  3. 0608MySQL备份与恢复之percona-xtrabackup软件的使用【基础】

    转自http://blog.csdn.net/justdb/article/details/17054579 一 使用percona-xtrabackup的原因 在前面,我们讲到MySQL冷备.热备. ...

  4. iWatch报错: Authorization request cancled

    iWatch报错: Optional (Error Domin = com.apple.healthkit Code = 5 "Autherization request canceled& ...

  5. 总结一下这几节Java课的...重点!!!

    1.定义一个Person类,包含两个私有的属性(name.age).一个含参的方法setValue(int age,String name).一个不含参方法setValue()和一个普通方法tell( ...

  6. Object类方法简介二

    在学了Object类前面的三个常用方法后,又遇到它的另外三个方法——clone().finalize().getClass(),这三个方法不经常使用,但因为在学习过程遇到了,就简单的对它们的使用做一个 ...

  7. javascript的==和===,以及if(xxx)总结

    转载请注明 本文出自:http://blog.csdn.net/nancle 首先说==和=== 首先说明一个非常特殊的值NaN, typeof(Nav)得到'number',可是NaN不等于不论什么 ...

  8. 【联系】二项分布的对数似然函数与交叉熵(cross entropy)损失函数

    1. 二项分布 二项分布也叫 0-1 分布,如随机变量 x 服从二项分布,关于参数 μ(0≤μ≤1),其值取 1 和取 0 的概率如下: {p(x=1|μ)=μp(x=0|μ)=1−μ 则在 x 上的 ...

  9. C# WinForm DataGridView 给标题列增加序号及格式化某个字段

    DataGridView 给标题列增加序号 private void dataGridView1_DataBindingComplete(object sender, DataGridViewBind ...

  10. 前后端分离开发,基于SpringMVC符合Restful API风格Maven项目实战(附完整Demo)!

    摘要: 本人在前辈<从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)>一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并 ...