在网页中，如果表哥数据量在两个维度上都较大时是不便于查看数据的，如果能够像excel那样冻结表头将有助于提高数据查阅的体验和效率。目前可够选择的解决方案很多，如果不希望引入过多的第三方库，那么运用jQuery也可以实现简单的表格表头冻结。
- 构建一个简单的表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简单表格</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<table class="table" id="main-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>posotion</th>
<th>introduction</th>
</tr>
</thead>
<tbody>
<!-- 该行多次复制 -->
<tr>
<td>1</td>
<td>stone</td>
<td>12</td>
<td>male</td>
<td>manager</td>
<td>a man</td>
</tr>
</tbody>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
简单的表格.gif
- 另外创建一个一模一样的只有表头的表并将这个表格固定在页面顶部
<table class="table" id="head-table" style="display: none;position: fixed;top:0;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>posotion</th>
<th>introduction</th>
</tr>
</thead>
</table>
- 页面滚动到主表格表头消失的时候显示附表
<script type="text/javascript">
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > 30) {
$('#head-table').css('display', 'block');
} else {
$('#head-table').css('display', 'none');
}
});
});
</script>
滚动.gif
- 调整附表表头宽度和主表一致
$('#head-table').find('th').each(function(){
$(this).width($('#main-table').find('th:eq(' + $(this).index() + ')').width());
});
调整附表表头宽度和主表一致.gif
- 为附表头加上背景颜色
<table class="table" id="head-table" style="display: none;position: fixed;top:0;background-color: aquamarine;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>posotion</th>
<th>introduction</th>
</tr>
</thead>
</table>
为附表头加上背景颜色
.gif
- 完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简单表格</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<table class="table" id="main-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>posotion</th>
<th>introduction</th>
</tr>
</thead>
<tbody>
<!-- 该行多次复制 -->
<tr>
<td>1</td>
<td>stone</td>
<td>12</td>
<td>male</td>
<td>manager</td>
<td>a man</td>
</tr>
</tbody>
</table>
<table class="table" id="head-table" style="display: none;position: fixed;top:0;background-color: aquamarine;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>posotion</th>
<th>introduction</th>
</tr>
</thead>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$('#head-table').find('th').each(function(){
$(this).width($('#main-table').find('th:eq(' + $(this).index() + ')').width());
});
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > 30) {
$('#head-table').css('display', 'block');
} else {
$('#head-table').css('display', 'none');
}
});
});
</script>
</body>
</html>
本文首发于公众号：programmer_cc，转载请注明出处。
微信公众号.jpg
网友评论