junle
- 浏览: 69370 次
- 性别:
- 来自: 沈阳
-
文章分类
最新评论
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>固定表头</title>
</head>
<style>
#box{
height:214px;
width:500px;
overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */
position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */
}
table,tr,td,th{
border:1px solid #ccd;
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 设置当文本过长时换行 */
}
th{
height:24px;
width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */
line-height:24px;
background-color:#cfc;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* 功能：固定表头
* 参数 viewid 表格的id
* scrollid 滚动条所在容器的id
* size 表头的行数（复杂表头可能不止一行）
*/
function scroll(viewid,scrollid,size){
// 获取滚动条容器
var scroll = document.getElementById(scrollid);
// 将表格拷贝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 获取表格的行数
var len = tb2.rows.length;
// 将拷贝得到的表格中非表头行删除
for(var i=tb2.rows.length;i>size;i--){
// 每次删除数据行的第一行
tb2.deleteRow(size);
}
// 创建一个div
var bak = document.createElement("div");
// 将div添加到滚动条容器中
scroll.appendChild(bak);
// 将拷贝得到的表格在删除数据行后添加到创建的div中
bak.appendChild(tb2);
// 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）
bak.style.position = "absolute";
// 设置创建的div的背景色与原表头的背景色相同（貌似不是必须）
bak.style.backgroundColor = "#cfc";
// 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）
bak.style.display = "block";
// 设置创建的div的left属性为0，即该div与滚动条容器紧贴
bak.style.left = 0;
// 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头
bak.style.top = "0px";
// 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端
scroll.onscroll = function(){
// 设置div的top值为滚动条距离滚动条容器顶部的距离值
bak.style.top = this.scrollTop+"px";
}
}
// 在页面加载完成后调用该方法
window.onload = function (){
scroll("tab","box",1);
}
//-->
</SCRIPT>
<body>
<div id="box">
<table id="tab">
<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>
<tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
<tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
</table>
</div>
</body>
</html>
<html>
<head>
<title>固定表头</title>
</head>
<style>
#box{
height:214px;
width:500px;
overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */
position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */
}
table,tr,td,th{
border:1px solid #ccd;
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 设置当文本过长时换行 */
}
th{
height:24px;
width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */
line-height:24px;
background-color:#cfc;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* 功能：固定表头
* 参数 viewid 表格的id
* scrollid 滚动条所在容器的id
* size 表头的行数（复杂表头可能不止一行）
*/
function scroll(viewid,scrollid,size){
// 获取滚动条容器
var scroll = document.getElementById(scrollid);
// 将表格拷贝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 获取表格的行数
var len = tb2.rows.length;
// 将拷贝得到的表格中非表头行删除
for(var i=tb2.rows.length;i>size;i--){
// 每次删除数据行的第一行
tb2.deleteRow(size);
}
// 创建一个div
var bak = document.createElement("div");
// 将div添加到滚动条容器中
scroll.appendChild(bak);
// 将拷贝得到的表格在删除数据行后添加到创建的div中
bak.appendChild(tb2);
// 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）
bak.style.position = "absolute";
// 设置创建的div的背景色与原表头的背景色相同（貌似不是必须）
bak.style.backgroundColor = "#cfc";
// 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）
bak.style.display = "block";
// 设置创建的div的left属性为0，即该div与滚动条容器紧贴
bak.style.left = 0;
// 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头
bak.style.top = "0px";
// 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端
scroll.onscroll = function(){
// 设置div的top值为滚动条距离滚动条容器顶部的距离值
bak.style.top = this.scrollTop+"px";
}
}
// 在页面加载完成后调用该方法
window.onload = function (){
scroll("tab","box",1);
}
//-->
</SCRIPT>
<body>
<div id="box">
<table id="tab">
<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>
<tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
<tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
</table>
</div>
</body>
</html>
分享到：
发表评论
-
Jasper报表工具经验总结
2020-07-16 12:58 01、JasperFillManager.fillReport执 ... -
在BootStrap的modal中使用Select2
2019-03-08 21:29 657在普通页面中使用Select2是正常的，但是在Modal中使用 ... -
获得浏览器版本信息
2016-06-16 10:36 625<script type="text/java ... -
用于获取系统版本
2016-06-15 18:06 653<script type="text/java ... -
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2016-05-31 17:04 1493td 内容自动换行 table表格td设置宽度后文字太多自动换 ... -
java session时间的控制
2015-12-15 16:46 804session对象用于在会话范 ... -
Unsupported major.minor version 51.0解决办法
2015-05-08 12:57 908解决方法：打开exclipse中项目上的属性—java co ... -
base64加密解密
2015-05-08 12:21 1030package test; import su ... -
更改SYBASE默认字符集为CP936
2015-04-18 11:46 1665更改SYBASE默认字符集为CP936 注意：更改字 ... -
JTDS和JDBC连接Sybase数据库
2015-04-17 19:09 1969JTDS是一个开放源代码的100%纯Java的，用于JDBC ... -
Jdbc方式连接Sybase数据库入门
2015-04-17 19:05 2463public class JdbcConnSybase { ... -
JDBC链接数据库（转载）
2015-04-17 19:02 6651、链接Sqlserver2000 驱动类 com.micr ... -
proxool连接池介绍
2015-04-14 14:12 714继前两文介绍了dbcp、c3p0的使用，本文准备再介绍另一个连 ... -
c3p0配置介绍
2015-04-14 14:11 756继上一篇介绍dbcp的配置 ... -
apache-DBCP基本配置介绍
2015-04-14 14:10 580apache-DBCP基本配置介绍 ... -
proxool连接池配置详细说明（转）
2015-04-14 08:33 1588目前市面上三个主流连接池从性能上排名如下：proxool> ... -
My eclipse快捷键
2015-02-25 10:41 7271、一般设置工作空间的编码为UTF-8 2、快捷键的配置 ... -
jsp页面返回上一页的方法
2014-11-05 10:50 2001jsp页面返回上一页的方法 1. <a hre ... -
移动平台前端开发参数1
2014-03-27 17:00 929移动平台前端开发是指 ... -
收集几个Java Web开发的网站
2014-03-13 17:12 922Zepto中文手册 http://www.html-5.cn/ ...
相关推荐
为了解决这个问题，"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置，无论用户如何滚动，表头始终可见，提高了用户的浏览体验。 在HTML中，实现固定表头通常需要CSS和JavaScript的配合。...
"实现Table表头和列固定"的目标就是解决这一问题，保持表头在滚动时始终显示，同时支持多表头和多列固定，确保布局清晰，无错位。 首先，我们需要理解HTML中的`<table>`元素是用于创建表格的基本结构。它由`<thead>...
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景颜色，确保它在视觉上与表格主体（.table-body）有所区分。重要的是，给这个表头添加一个合适的padding-right样式。这个...
"基于jQuery的table表头固定"通常涉及到以下关键技术点： 1. **分离表头和主体**：首先，我们需要将HTML表格的thead部分与tbody部分分离，这样在进行滚动操作时，thead可以独立于tbody进行定位。 2. **CSS定位**：...
在网页设计中，"table的表头固定"是一种常见的需求，尤其在展示大量数据时，保持表头在页面滚动时始终可见，可以帮助用户更好地理解数据列的含义。在这个场景下，我们通常会使用HTML的`<table>`元素来构建表格，并...
总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数...
"移动web table固定表头第一列.rar"这个压缩包文件显然是为了解决这些问题，提供了一种在移动端实现固定表头和第一列的解决方案。下面将详细讲解如何在HTML5和CSS3环境下实现这样的功能。 首先，我们需要创建一个...
本文将深入探讨如何使用`table`元素，并结合jQuery实现表头及列的固定，以便在滚动时保持关键信息可见，提高用户体验。 首先，让我们了解`table`的基本结构。一个`table`由`<table>`标签开启，`</table>`标签关闭。...
为了解决这个问题，"JavaScript:固定table的表头"这一技术应运而生，它的目标是确保当用户滚动页面时，表头始终固定在页面顶部，提供清晰的列标识。 实现固定表头的方法多种多样，其中JavaScript是一种常见的解决...
js table 固定表头
"html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`定义表格行，`<th>`定义表头...
在网页设计中，数据展示经常使用到表格（Table），尤其是数据量大时，为了方便用户浏览，固定表头成为一种常见的需求。固定表头可以使用户在滚动页面时始终保持表头可见，以便清楚地知道每一列对应的数据含义。本文...
为解决这一问题，基于jQuery的固定html table表头/列头插件应运而生，例如本案例中的"jquery.fixedtable.js"。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在jQuery基础上...
本话题将深入探讨如何使用jQuery实现表格添加滚动条的功能，并固定表头，这在处理大量数据时非常有用，因为可以保持表头可见，方便用户在滚动时查看列名。我们将基于提供的"superTables.js"和"superTables"这两个...
table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器
为了解决这个问题，可以采用固定表头的方法，即无论用户如何滚动表格，表头始终固定在页面的顶部。 使用CSS固定表格表头的技术可以通过多种实现方式完成。此处提供了两种方法的代码示例，让我们来深入探讨这些技术...