固定标题列、标题头table
<!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>
固定标题列、标题头table的更多相关文章
- jquery实现行列的单向固定和列的拖拽
其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...
- bootstrap table 标题列重复
使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...
- easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
- POI中getLastRowNum() 和getLastCellNum()的区别 hssfSheet.getLastRowNum();//最后一行行标，比行数小1 hssfSheet.getRow(k).getLastCellNum();//获取列数，比最后一列列标大1
hssfSheet.getLastRowNum();//最后一行行标,比行数小1 hssfSheet.getRow(k).getLastCellNum();//获取列数,比最后一列列标大1
- DataGridView列标题(列标头)不能居中的解决方法
winform DataGridView列标题(列标头)不能完全居中的解决方法,一般列标题的居中我们都使用 DgvDemo.ColumnHeadersDefaultCellStyle.Alignmen ...
- 让cxGrid像Excel那样高亮显示选区的行号列标
http://www.oschina.net/code/snippet_54100_1102 Developer Express的cxGrid控件是一个相当有特色的数据栅格组件,支持自动分组.卡片式显 ...
- C# WinForm DataGridView 给标题列增加序号及格式化某个字段
DataGridView 给标题列增加序号 private void dataGridView1_DataBindingComplete(object sender, DataGridViewBind ...
- html - table 表格不被撑开，td某些列宽度固定某些列自适应
table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...
- vue table 固定首列和首行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
随机推荐
- linux基础 -nginx和nfs代理 开发脚本自动部署及监控
开发脚本自动部署及监控 1.编写脚本自动部署反向代理.web.nfs: (1).部署nginx反向代理三个web服务,调度算法使用加权轮询: (2).所有web服务使用共享存储nfs,保证所有web ...
- MySQL 进阶（待发布）
视图 存储过程 触发器 基本函数
- (转)linux samb服务器配置
1. 首先安装samba服务. 2. 配置防火墙(要先关闭) 3. 创建samba服务器用户:smbpasswd -a username 删除samba服务器用户:smbpasswd -x u ...
- linux平台从源码安装git【转】
转自:http://blog.csdn.net/lianshaohua/article/details/50571560 版权声明:本文为博主原创文章,未经博主允许不得转载. 如果是ubuntu等能自 ...
- php扩展
swoole 命令行/php-fpm下实现的 多线程.异步.多种网络协议等 https://wiki.swoole.com/wiki/page/6.html 编译安装, 注意:需命令行运行,作为内部服 ...
- String类的常见方法的使用案例
String类的常见方法的使用案例 //使用指定的字符串替换当前字符串中指定的内容 //将helloworld中的o替换为a String s="HelloWorld"; Stri ...
- react-slick无法显示预期效果问题
目前学习react来做新项目,我要做一个图片的轮播,是那种一次可以展示几张图片的循环轮播,在我们使用的antd里面没有,然后前辈叫我使用react-slick插件,于是我就使用npm命令安装了reac ...
- Solidity 文档--第二章：安装 Solidity
安装Solidity 基于浏览器的Solidity 如果你只是想尝试一个使用Solidity的小合约,你不需要安装任何东西,只要访问基于浏览器的Solidity. 如果你想离线使用,你可以保存页面到本 ...
- Java中的new关键字和引用传参
先看看Java中如何使用new关键字创建一个对象的. [java] view plain copy public class Student { public String name; public ...
- 2017中国大学生程序设计竞赛 - 女生专场C【前后缀GCD】
C HDU - 6025 [题意]:去除数列中的一个数字,使去除后的数列中所有数字的gcd尽可能大. [分析]: 数组prefixgcd[],对于prefixgcd[i]=g,g为a[0]-a[i]的 ...