table表头固定
来源：互联网 发布：奇葩说范湉湉长相 知乎 编辑：程序博客网 时间：2024/06/10 19:41
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../ceshi01/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table {border-spacing: 0;border-collapse: collapse;}
.bj-table{height: 100px;overflow-y: auto;}
.bj-table table tr th { background-color: #d8d7d7; height: 30px;border: 1px solid #e1e1e1;text-align: center;padding: 0px 5px;}
.bj-table table tr td {height: 30px; border: 1px solid #e1e1e1;text-align: center;padding: 0px 8px;}
.g10{width: 100px;}
#notifyListTopTable,#bujian,#xiangjian{position: relative;}
#notifyListTopTable table thead{width:900px;position: absolute;z-index:999;}
#notifyListTopTable table tbody{ position: absolute;top:30px; width:900px;table-layout: fixed;}
#notifyListTopTable tbody tr td { table-layout: fixed;white-space: normal;line-height: 1.42857143;}
</style>
</head>
<body>
<div class="bj-table" id="notifyListTopTable">
<table style="width:900px;" id="notifyListTop">
<thead>
<tr>
<th class="g10">完结</th>
<th class="g10">单据编号</th>
<th class="g10">下单日期</th>
<th class="g10">开箱时间</th>
<th class="g10">开箱地点</th>
<th class="g10">参加单位</th>
<th class="g10">设备描述</th>
<th style="width:99px;">备注</th>
<th class="g10">制单人</th>
</tr>
</thead>
<tbody id="notifyList">
<tr>
<td class="g10">是是是</td>
<td class="g10">是是是</td>
<td class="g10"> 对对对</td>
<td class="g10">等等</td>
<td class="g10"> 对对对</td>
<td class="g10">试试</td>
<td class="g10">嗯嗯</td>
<td style="width:99px;"> 是是是</td>
<td class="g10">啊啊啊</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
$("#notifyListTopTable").scroll(function(){
var headerTopHeight = $("#notifyListTopTable")[0].scrollTop;
$("#notifyListTopTable thead").css("top",headerTopHeight+"px");
})
</script>
- css 固定table表头
- Table实现表头固定
- table表头行固定
- 固定table表头
- table表头行固定
- table固定表头
- table固定表头
- 固定table表头
- table表头固定
- 固定table的表头
- bootstrap固定table表头
- table固定表头
- bootstrap Table表头固定
- bootstrap固定table表头
- table表头固定
- 如何固定table的表头
- 如何固定table的表头
- 如何固定table的表头
- ElasticSearch的客户端程序开发(R,perl,python)
- OKhttp post上传文件
- tomcat-8.0.42源码布署
- javascript原型的理解
- CocoaPods安装与卸载
- table表头固定
- 在网页中播放rmvb格式的视频
- ubuntu 17.04源码安装nginx1.12.2并配置开机启动
- Java给文件重命名
- SSD
- 链表节点计数-LintCode
- SVN使用教程总结
- 如何在Recent App不显示某个应用
- android UI调试工具SwissArmyKnife
