Posted on 2016-04-26 18:12
lxasp 阅读(3858)
评论(0) 编辑 收藏 引用 所属分类:
AJAX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>table-head-fix
</title>
<meta name="generator" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.tbHeadFix {
font-size: 12px;
position: relative;
border: 0px solid #E4F1FF;
overflow: hidden;
color: #000;
+border-right: 0px solid #cde;
+padding-right: 2px;
}
.tbHeadFix div.theadDivBox {
float: left;
padding-right: 40px;
}
.tbHeadFix div.tbodyDiv table {
/* margin-bottom: 10px;*/
border-bottom: 0px;
margin-bottom: 0px;
}
.tbHeadFix div.theadDiv {
background: #fafafa;
position: relative;
border: 1px solid #cde;
border-bottom: 0px;
overflow: hidden;
+width:100%;
}
.tbHeadFix div.theadDiv table {
border-right: 1px solid #fff;
}
.tbHeadFix div.tbodyDiv {
border: 1px solid #cde;
border-top: 0px;
background: #fff;
overflow: auto;
position: relative;
+width:100%;
}
.tbHeadFix div.tbodyDiv table {
border-bottom: 1px solid #cde;
}
.tbHeadFix div.theadDiv th, .tbHeadFix div.tbodyDiv td
{
text-align: left;
border-right: 1px solid #def;
border-left: 1px solid #fff;
overflow: hidden;
vertical-align: top !important;
}
.tbHeadFix div.theadDiv th div, .tbHeadFix div.tbodyDiv td div
{
padding: 5px;
border-left: 0px solid #fff;
}
.tbHeadFix div.theadDiv th {
font-weight: normal;
height: 24px;
cursor: default;
white-space: nowrap;
overflow: hidden;
}
.tbHeadFix div.tbodyDiv td {
border-bottom: 1px solid #fff;
vertical-align: top;
white-space: nowrap;
}
.tbHeadFix div.tbodyDiv td div {
border-top: 0px solid #fff;
padding-bottom: 4px;
}
.tbHeadFix tr.trZ td {
background: #F0F8FF;
border-bottom: 1px solid #F0F8FF;
}
.tbHeadFix div.tbodyDiv tr:hover td{
background: #d9ebf5;
border-left: 1px solid #eef8ff;
border-bottom: 1px dotted #a8d8eb;
}
.tbHeadFix div.theadDiv th div, .tbHeadFix div.tbodyDiv td div
{
+overflow: hidden;
}
</style>
</head>
<body>
<div id="table1">
<div style="width: 365px;" class="tbHeadFix">
<div class="theadDiv" id="table1_theadDiv">
<div class="theadDivBox">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="" axis="col0" abbr="标识号" align="left">
<div class="" style="text-align: left; width: 100px;">标识号
</div>
</th>
<th class="" axis="col1" abbr="标题" align="left">
<div class="" style="text-align: left; width: 100px;">标题
</div>
</th>
<th class="" axis="col2" align="left">
<div class="" style="text-align: left; width: 100px;">语句
</div>
</th>
<th class="" axis="col3" align="left">
<div class="" style="text-align: left; width: 100px;">类型
</div>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div style="height: 260px;" class="tbodyDiv" id="table1_tbodyDiv">
<table id="flex1" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id="row146">
<td align="left">
<div style="text-align: left; width: 100px;">146
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">高峰时段运行时间
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row145" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">145
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">操作员导入企信通信息
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row144">
<td align="left">
<div style="text-align: left; width: 100px;">144
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">业务用车出差管理
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row143" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">143
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">在职操作员及家属联系方式
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row142">
<td align="left">
<div style="text-align: left; width: 100px;">142
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">SMS信息发送日志
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row141" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">141
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">短信发送管理
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row140">
<td align="left">
<div style="text-align: left; width: 100px;">140
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">7.2计价与实收金额差异对比
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">system_publiclogInfo
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row139" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">139
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">7.1公共工作班次运行信息
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row138">
<td align="left">
<div style="text-align: left; width: 100px;">138
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">4.3操作员演示非法汇总
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row137" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">137
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">4.4东西演示非法累计
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row136">
<td align="left">
<div style="text-align: left; width: 100px;">136
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">特定数据分析20130628
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">a.mc_
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row135" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">135
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">BET三个月数据正常的东西
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">bet
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row134">
<td align="left">
<div style="text-align: left; width: 100px;">134
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">某单位需要的操作员资料
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row133" class="trZ">
<td align="left">
<div style="text-align: left; width: 100px;">133
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">5.6演示协会设备年审
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
<tr id="row132">
<td align="left">
<div style="text-align: left; width: 100px;">132
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">整理抽查问题汇总
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">/*inner cell*/
</div>
</td>
<td align="left">
<div style="text-align: left; width: 100px;">0
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
document.getElementById("table1_tbodyDiv").onscroll=function(e) {
document.getElementById("table1_theadDiv").scrollLeft = document.getElementById("table1_tbodyDiv").scrollLeft;
};
</script>
</body>
</html>