固定标题列、标题头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基础——文件的压缩解压缩以及vim编辑
一.将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/{passwd,group} > /1.txt 查看:cat /1.txt 二. ...
- Swift 枚举(七)
http://blog.csdn.net/huangchentao/article/details/32714621 枚举 1.枚举语法 用enum并把定义放在大括号内,枚举中被定义的值是枚举的成员, ...
- 关于might_sleep的一点说明---CONFIG_DEBUG_ATOMIC_SLEEP【转】
转自:http://blog.chinaunix.net/uid-23769728-id-3157536.html 这个函数我在看代码时基本上是直接忽略的(因为我知道它实际上不干什么事),不过因为内核 ...
- 解决小米/红米手机无法进行jdwp调试的问题
问题描述:在逆向一个app,研究环境是一台红米2,需要使用jdwp接口,也就是ddms下面这个界面: 但神奇的是,同一台主机上,模拟器的进程可以显示在ddms界面上,红米2确一个进程都没有显示出来.c ...
- Selenium 多窗口元素定位处理
以下文章来自于 上海-悠悠的博客 <Selenium2+python自动化13-多窗口.句柄(handle)> 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作, ...
- DRF的异常处理
默认情况下,DRF框架通过内置的 exception_handler 方法,处理了如下异常: django内置异常 Http404 PermissionDenied DRF框架异常 APIExcept ...
- 搜索引擎--范例：django之初试牛刀
这学期学了一门课<信息检索>,也就是传说中的搜索引擎 大作业自然而然的让我们自己做一个小型的搜索引擎.于是乎,我们本次的主题就诞生了 我也是边学边用,下面和大家一起分享我在这个过程中学到的 ...
- PYTHON设计模式学习（2）：什么是设计模式
第一章: 本章主要是讨论什么是面向对象,在对面向对象理解的基础上,再讨论一些高深的话题,比如:设计模式. 所以,本章有如下主题: 1)明白什么是面向对象编程. 在学习设计模式之前,最好对python在 ...
- 创建展开行明细编辑表单的 CRUD 应用
http://www.runoob.com/jeasyui/jeasyui-app-crud3.html jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用 当切换数据网格 ...
- shell脚本学习(二)
shell传递参数 shell脚本在执行是可以传递参数,脚本内获取参数的格式为:$n,n为一个数字,1为第一个参数,2为第二个参数,以此类推 其中,$0代表了要执行的文件名 实例: 代码如下: #!/ ...