正文
前端html之------>Table实现表头固定
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
文章来源于: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>
二、演示:
.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;
}
序号 | 内容 |
---|
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实现表头固定的更多相关文章
-
html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
-
html Table实现表头固定
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
-
Table实现表头固定 内容滚动
<div style="width: 800px;"> <div class="table-head"> <table> & ...
-
css手写一个表头固定
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...
-
纯CSS实现table表头固定(自创备忘)
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
-
jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
-
(转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
-
Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
-
table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
随机推荐
-
2-SAT·hihoCoder音乐节
2-SAT·hihoCoder音乐节 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 hihoCoder音乐节由hihoCoder赞助商大力主办,邀请了众多嘉宾和知名乐队 ...
-
hdu 1245 Saving James Bond 策画几何+最短路 最短路求步数最少的路径
#include<stdio.h> #include<string.h> #include<math.h> #define inf 0x3fffffff #defi ...
-
【ACM】hdu_zs2_1007_Problem G _201308031028
Problem G Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other)Total Subm ...
-
洛谷 P2399 non hates math
P2399 non hates math 题目背景 non习惯将分数化成小数,但在数学中要以分数形式写,不能化成小数 因此non找到了会编程的你,帮助他将小数化回分数 题目描述 给出一个小数,将它化成 ...
-
Seaside HDU 3665 【Dijkstra】
Problem Description XiaoY is living in a big city, there are N towns in it and some towns near the s ...
-
[\S\s]+ 可以匹配多行html,最常用的还是.*?
[\S\s]+ 可以匹配多行html,最常用的还是.*?
-
18005 It is not ugly number
18005 It is not ugly number 时间限制:2000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC Description ...
-
ZOJ 1654 Place the Robots(最大匹配)
Robert is a famous engineer. One day he was given a task by his boss. The background of the task was ...
-
读取url中某个值
url="http://test.plus.1course.cn/Task/Display?id=25942" print(url) result=url.split('/')[- ...
-
C语言数组和函数实例练习(一)
C语言的数组和函数部分的知识,在语法上和Java语法是有所相似的,这里只通过实例总结一些自己感觉需要理解的部分知识. 1.数组 数组中的元素具有相同的数据类型:数组一旦创建,不能被改变:数组中元素在内 ...
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
<div style="width: 800px;"> <div class="table-head"> <table> & ...
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
-
2-SAT·hihoCoder音乐节
2-SAT·hihoCoder音乐节 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 hihoCoder音乐节由hihoCoder赞助商大力主办,邀请了众多嘉宾和知名乐队 ...
-
hdu 1245 Saving James Bond 策画几何+最短路 最短路求步数最少的路径
#include<stdio.h> #include<string.h> #include<math.h> #define inf 0x3fffffff #defi ...
-
【ACM】hdu_zs2_1007_Problem G _201308031028
Problem G Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other)Total Subm ...
-
洛谷 P2399 non hates math
P2399 non hates math 题目背景 non习惯将分数化成小数,但在数学中要以分数形式写,不能化成小数 因此non找到了会编程的你,帮助他将小数化回分数 题目描述 给出一个小数,将它化成 ...
-
Seaside HDU 3665 【Dijkstra】
Problem Description XiaoY is living in a big city, there are N towns in it and some towns near the s ...
-
[\S\s]+ 可以匹配多行html,最常用的还是.*?
[\S\s]+ 可以匹配多行html,最常用的还是.*?
-
18005 It is not ugly number
18005 It is not ugly number 时间限制:2000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC Description ...
-
ZOJ 1654 Place the Robots(最大匹配)
Robert is a famous engineer. One day he was given a task by his boss. The background of the task was ...
-
读取url中某个值
url="http://test.plus.1course.cn/Task/Display?id=25942" print(url) result=url.split('/')[- ...
-
C语言数组和函数实例练习(一)
C语言的数组和函数部分的知识,在语法上和Java语法是有所相似的,这里只通过实例总结一些自己感觉需要理解的部分知识. 1.数组 数组中的元素具有相同的数据类型:数组一旦创建,不能被改变:数组中元素在内 ...