为了布局的美观度需要在html中固定标题列、标题头，本文整理了一些相关实现技巧，经测试还不错，感兴趣的朋友可以参考下，希望对你有所帮助
代码如下:
<!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>
<div>
<div>
<table>
<tr>
<th>账号</th>
<th>姓名</th>
</tr>
</table>
</div>
<div id="cl_freeze">
<table>
<tr>
<td>1</td>
<td>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>
<div id="t_r_t">
<div>
<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 id="t_r_content" onscroll="aa()">
<table>
<tr>
<td width="10%">1</td>
<td width="20%">1</td>
<td width="10%">1</td>
<td width="20%">1</td>
<td width="20%">1</td>
<td width="20%">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>
- 2017年佛山市卫生计生统计信息中心招聘辅助服务雇员专题汇总
- 2017年佛山市卫生计生统计信息中心招聘辅助服务雇员公告
- 佛山市顺德区新顺德人服务协会2017年招考综合成绩公告及体检通知
- 2016年遂宁市蓬溪县卫生事业单位小分队考核招聘工作人员拟聘用人员的公示
- 2017年上半年内江市考聘教育公共科目笔试报名统计截至2017年3月20日9:30
- 上海市事业单位招聘考试信息20170320
- 2016年佛山市顺德区疾病预防控制中心招聘工作人员技能实践测评成绩及体检公告
- 浙江省事业单位招聘考试信息20170320
- 2016年下半年惠州市直事业单位招聘拟聘用人员名单公示通告
- 2017年中共深圳市福田区委组织部(区编办)选用劳务派遣人员拟选用人员公示公告
- 眉山市档案局2017年招聘编外工作人员的公示
- 广州市黄埔区永和街2017年招聘街镇专职安监员及社区巡查员面试对象名单
- 2016年下半年惠州市惠阳区事业单位招聘人员拟聘用人员公示(递补)
- 2017年湖州经济技术开发区管理委员会招聘新居民专职协管员入围面试名单公布
- 2017年湖州市行政服务中心招聘合同制工作人员启事
- 2017年泉州市正骨医院招聘工作人员报名时间
- 2017年滁州市琅琊区教育体育局招聘专职财务人员公告
- 2017年遵义市习水县事业单位招聘职位取消公告
- 2017年泉州市正骨医院招聘工作人员通告
- 2017年湖州市南太湖公证处招聘工作人员公告
- 2017年湖州市疾病预防控制中心编外用工招聘公告
- 毕节市公安局警务服务中心2016年社会招聘工作人员拟聘用人员公示
- 2017年泉州市正骨医院招聘工作人员岗位信息表
- 2017年招聘中山大学数据科学与计算机学院合同聘用人员启事
- 湖州市市级医疗卫生单位2017年度招聘医疗卫生专业工作人员公告
- uncritical acceptance
- uncritically
- uncross
- uncrossed
- uncrossed cheque
- uncrossed-cheque
- uncrowded
- uncrowned
- uncrushable
- trumpeter
- 如出一口
- 如出一辙
- 如切如磋
- 如坐云雾
- 如坐春风
- 如坐针毡
- 如埙如篪
- 如堕五里雾中
- 如堕烟海
- 如堕烟雾
- 教育叙事论文范文
- 科任教师教育叙事范文
- 优秀小学教育叙事范文
- 教师个人教育叙事范文
- 中学音乐教育叙事范文
- 初中历史教育叙事范文
- 初中学生教育叙事范文
- 教育叙事减轻学生负担
- 政治学科教育叙事
- 高中物理教育叙事范文