极客观点
项目管理
HarmonyOS
通过监听scroll,设置表头的th的相对位置使其固定后，表头的border不显示了，如何让表头的border显示出来
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style="" class="row" id="lstData">
<div class="col-sm-12 col-md-12">
<section class="panel">
<div style="padding-top: 5px; padding-bottom: 0px;" class="panel-body">
<div style="padding-bottom: 5px;" class="row">
<div class="col-sm-8 col-md-8">
<div class="form-inline">
<label class="control-label" id="QryCon">公司名称:aaa | 人员状态:在职</label>
</div>
</div>
<div class="col-md-4 col-md-4 text-right">
<button onclick="javascript:cap_excel();" class="btn btn-success" type="button"><i class="fa fa-file-excel-o"></i> EXCEL</button>
<button onclick="javascript:cap_back();" class="btn btn-info" type="button"><i class="fa fa-backward"></i> 返 回</button>
</div>
</div>
<div style="height: 300px; overflow-y: scroll" class="table-responsive" id="divScroll">
<table class="table table-bordered table-hover mb-none" id="tblData" style="margin-top: 0px;">
<thead>
<tr class="tblHeader">
<th>#</th>
<th>员工工号</th>
<th>员工姓名(中文)</th>
<th>部门</th>
<th>职务</th>
<th>入职日期</th>
<th>操作</th>
</tr>
</thead>
<tbody><tr><td>1.</td><td>0000000001</td><td>张三</td><td>系统管理部门</td><td>财务主管</td><td class="text-center">2016-08-16</td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(104);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>2.</td><td>0000000002</td><td>李四</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(105);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>3.</td><td>0000000003</td><td>王五</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(106);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>4.</td><td>0000000004</td><td>王五1</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(107);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>5.</td><td>0000000005</td><td>赵六</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(108);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>6.</td><td>0000000006</td><td>aaa</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(109);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>7.</td><td>0000000007</td><td>bbb</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(110);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>8.</td><td>0000000008</td><td>ccc</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(111);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>9.</td><td>0000000009</td><td>ddd</td><td>系统管理部门</td><td>QA工程师</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(112);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>10.</td><td>0000000010</td><td>eee</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(113);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>11.</td><td>0000000011</td><td>fff</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(114);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>12.</td><td>0000000012</td><td>gg</td><td>系统管理部门</td><td>QA工程师</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(115);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr><tr><td>13.</td><td>0000000013</td><td>gg</td><td>系统管理部门</td><td>财务主管</td><td class="text-center"></td><td class="text-center actions"><a href="javascript:cap_viewEmpInfo(116);" data-toggle="tooltip" data-placement="top" title="检视"><i class="fa fa-eye"></i></a></td></tr></tbody>
</table>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 text-right">
<div class="pagination" id="Pagination" style="display: inline-block;"></div>
</div>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$(function () {
setScroll("#divScroll");
});
function setScroll(id) {
var obj = $(id);
$(id + " table:eq(0) thead th").css("position", "relative").css("top", "0px").css("box-size", "border-box").css("border", "5px solid #ddd;").css("background-color", "#fdfdfd");//设置相对定位
obj.on('scroll', function () {
var top = $(id).scrollTop();
if (top > 0) {
$(id + " table:eq(0)").css("margin-top", "-1px");//覆盖上面的间隙
$(id + " table:eq(0) thead th").css("top", top + "px");
} else {
$(id + " table:eq(0)").css("margin-top", "0px");
$(id + " table:eq(0) thead th").css("top", top + "px");
}
});
}
</script>
</body>
</html>
代码都没有，别人怎么看