固定标题列、标题头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 ...
随机推荐
- yum软件包安装
使用yum安装软件 配置yum配置文件 cd /etc/yum.repos.d/ vim rhel7.repo [rhel7-source] name=rhel7-source baseurl=fil ...
- POJ2186 （强连通分量缩点后出度为0的分量内点个数）
Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 27820 Accepted: 11208 De ...
- 使用python获取整月每一天的系统监控数据生成报表
1.安装阿里开源监控工具tsar tsar官方网站 wget -O tsar.zip https://github.com/alibaba/tsar/archive/master.zip --no-c ...
- MATLAB求函数零点与极值
1. roots函数 针对多项式求零点(详见MATLAB多项式及多项式拟合) 2. fzero函数 返回一元函数在某个区间内的的零点. x0 = fzero(@(x)x.^2-3* ...
- JSON格式数据的js操作
第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...
- Eclipse默认标签TODO,XXX,FIXME和自定义标签
1 TODO 表示需要实现,但目前还未实现的功能 2 XXX 勉强可以工作,但是需要改进的功能 3 FIXME 代码是错误的,不能工作,需要修复 4.自定义标签 window-->prefere ...
- KISSY - A Powerful JavaScript Framework
KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的工具集合如 DOM.Event.Ajax.Anim 等,它还提供了经典的面向对象.动态加载.性能优化解决方案 ...
- 树上两点的最近公共祖先问题(Least Common Ancestors)
概念: 对于有根树T的两个节点u,v,最近公共祖先LCA(T, u, v)表示一个节点 x, 满足 x 是 u , v 的祖先且 x 的深度尽可能的大.即从 u 到 v 的路径一定经过点 x. 算法: ...
- 使用 Hibernate 完成 HibernateUtils 类 (适用于单独使用Hibernate或Struts+Hibernate)
package com.istc.Utilities; import org.hibernate.Session; import org.hibernate.SessionFactory; impor ...
- Maven学习笔记2
Maven安装配置 1.下载Maven 官方地址:http://maven.apache.org/download.cgi 将下载的压缩包解压到你要安装 Maven 的文件夹.假设你解压缩到文件夹 – ...