<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
//创建测试用的表格数据
$(function () {
var str =
' <tr><td style="display:none;">1acc508a-c064-11e8-9d01-fa163e12636c</td><td>毛毛</td><td class="price"> 0.0 </td><td><label>测试</label> </td> <td> 2018-09-30</td></tr>'
for (var i = 0; i < 100; i++) {
document.getElementById("bodyTr").innerHTML += str;
}
})
</script>
<style>
/**
* 自定义表格样式
**/
table {
border-collapse: collapse;
border-spacing: 2px;
border-radius: 3px;
width: 100%;
margin-bottom: 8px;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th {
height: 50px;
background: #f5f5f5;
border: none;
line-height: 50px;
color: #333;
font-size: 14px;
}
td {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>金额</th>
<th>类别</th>
<th>日期</th>
</tr>
</thead>
<tbody id="bodyTr">
</tbody>
</table>
</body>
<!--引入jquery插件-->
<script type="text/javascript" src="jquery.tablefixed.js"></script>
<script>
setTimeout(function(){
/**
* 调用方法
*/
$("table").fixedTable({divHeadId:'divHead_top',divBodyId:'divBody_top',height:"300px",width:"50%"});
},20);
</script>
</html>
