<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定标题列、标题头table</title>
<style>
table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}
table td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}
table th{ background:#edd3d4; color:#a10333; border:#000 solid 1px; white-space:nowrap; height:21px; border-top:0px;border-left:0px;}
.t_left{width:30%; height:auto; float:left;border-top:1px solid #000;border-left:1px solid #000;}
/*t_r_content和cl_freeze高度相差20px, 高度为外观显示高度,可根据情况调整*/
.t_r_content{width:100%; height:220px; background:#fff; overflow:auto;}
.cl_freeze{height:200px;overflow:hidden; width:100%;}
/* width 调整左边标题列宽度(左侧外观显示宽度); 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/
/* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
/* 如果显示不正常,调整 t_r的width 使其和t_left的width之和小于100%;等于100%时会有问题*/
.t_r{width:69.5%; height:auto; float:left;border-top:1px solid #000; border-right:#000 solid 1px;}
.t_r table{width:1700px;}
.t_r_title{width:1720px;}/*宽度比 t_r table 大20px (至少大20,小了滚动条滑到右侧显示有问题)*/
.t_r_t{width:100%; overflow:hidden;}
.bordertop{ border-top:0px;}
</style>
<script>
function aa(){
var a=document.getElementById("t_r_content").scrollTop;
var b=document.getElementById("t_r_content").scrollLeft;
document.getElementById("cl_freeze").scrollTop=a;
document.getElementById("t_r_t").scrollLeft=b;
}
</script>
</head>
<body>
<div style="width:100%">
<div class="t_left">
<div style="width:100%;">
<table>
<tr>
<th style="width:40%">账号</th>
<th style="width:60%">姓名</th>
</tr>
</table>
</div>
<div class="cl_freeze" id="cl_freeze">
<table>
<tr>
<td style="width:40%" class="bordertop">1</td>
<td style="width:60%" class="bordertop">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>20</td>
</tr>
</table>
</div>
</div>
<div class="t_r">
<div class="t_r_t" id="t_r_t">
<div class="t_r_title">
<table>
<tr>
<th width="10%">字段A</th>
<th width="20%">字段B</th>
<th width="10%">字段C</th>
<th width="20%">字段D</th>
<th width="20%">字段E</th>
<th width="20%">字段F</th>
</tr>
</table>
</div>
</div>
<div class="t_r_content" id="t_r_content" onscroll="aa()">
<table>
<tr>
<td width="10%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
<td width="10%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
<td width="20%" class="bordertop">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</div>
</div> </div>
</body>
</html>
分享到:
相关推荐
Javascript脚本实现HTML页面中表格Table的标题行固定位置,并与表格内容对齐。
为了布局的美观度需要在html中固定标题列、标题头,本文整理了一些相关实现技巧,经测试还不错,感兴趣的朋友可以参考下哈,希望对你有所帮助
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class=table_box_big> <div class=table_box> ... <th><div>标题标题标题标题标题标题标题标题标题四
利用css和jquery实现table表头固定(浮动)显示,不复制表格内容,不更改页面元素,完全通过js设置样式来实现。
话不多说,跟这小编来一起看下吧 ... //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
HTML5_html表头固定不滚动而内容滚动的效果,表格是基于Div CSS实现的,将表头固定住不滚动,而表格里面的每行数据随滚动条滚动。在显示较多数据时,当用户滚动鼠标中轮时,表格内容会滚动,而表头固定不变,可以将...
角固定表头 该模块将允许您在标题保持可见的情况下垂直滚动表。 执照 该软件是免费提供的,不受限制 演示版 安装 使用凉亭 该软件包可通过Bower软件包管理器安装。 bower install angular-fixed-table-header -...
GridViewScroll-新冻结Table或GridView中的列和固定标题产品特点浏览器的默认滚动条冻结页眉,列,页脚(仅最后一行)入门从GitHub下载在网页中包含gridviewscroll.js < script type =" text/javascript " src =...
jquery-ui-table jQuery UI 表格小部件为 HTML 文档中的普通表格启用了许多功能。 至少,小部件为 tbody 提供了难以捉摸但简单的 y 轴滚动,允许固定的页眉和页脚。 列宽在所有表格元素之间保持不变,即使存在滚动条...
样式: 复制代码代码如下: .fixedHead { position: relative;...复制代码代码如下: <div> <table class=”con_tbl”> ”fixedHead”> 标题不动</th> </tr> <PRE class=html name=”code”> <t
带有滚动的固定标题 轻松禁用和自定义方法 获取选定列的值 移动优先 跨浏览器:IE 8.0 +,FF 3 +,Safari 2.0 +,Opera 9.0 +,Chrome 5.0+。 支持Bootstrap v2和3。 支持字体真棒。 较小的代码大小,仅压缩了4KB...
本文实例讲述了asp.net实现固定GridView标题栏的方法。分享给大家供大家参考,具体如下: <%@ Page Language=C# %> <%@ Import Namespace=System.Data %> <!DOCTYPE html PUBLIC -//W3C//DTD ...
有了Table Engine,就没有诸如列/行标题,排序,过滤,...-仅单元格,边框和一个或多个单元格选择之类的概念。 从本质上讲,表引擎更像是用于构建表组件的框架,因此,作为开发人员,您必须在更高的抽象级别上构建...
在这里,我将创建一个带有垂直列滚动固定列的html项目。 一段时间,我们需要将成千上万的数据加载到html中。 那时,当我们滚动表标题时,它也滚动并移出页面,因此看不到它。 那个时候我们需要使我们的html表头固定...
支持在窗口内滚动或在具有溢出的容器内滚动时浮动标题。 支持响应表。安装包装经理npm install floattheadbower install floatThead下载代码通过CDN <!-- Latest compiled and minified JavaScript -->< ...
步骤一:首先建立一个div-contain,里面放背景图片div-pic、标语div-topic和注册框div-sign三个div,因为图片较大且想让图片固定故将pic设置为fixed定位,而sign、topic设置为absolute 步骤二:div-sign先建立form,...
语义化标签:段落标签,标签自定义文字样式,标题标签,块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧边栏区域; 效果标签: 标签实现换行效果,特殊字符 实现空格效果,标签实现水平线...
-d 没有数据 –add-drop-table 在每个create语句之前增加一个drop table 4.导入数据库 A:常用source 命令 进入mysql数据库控制台, 如mysql -u root -p mysql>use 数据库 然后使用source命令,后面参数为脚本文件(如...
模板标题:仿者户外护栏建材企业网站源码 模板版本:艺帆企业CMS V1.7.6 演示网站:http://cn.goforrail.com/down/show-2680.html 下载地址:http://cn.goforrail.com/down/show-2680.html 关键词:护栏企业网站,...