关于jsp页面表格表头固定,随着下拉条表头移动
2017-08-18 12:11
1111 查看
在项目中碰见jsp页面遍历数据过多,下拉后看不见表头,如果用easyUi就不存在固定表头问题了。
如果是单纯的table,遍历,那么我们可以引用bootstrap中的滚动监听来控制。
在页面引入
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
在body中引入
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- 此部分是固定表头,单独放入一个表中-->
<table class="table" style="width: 95%" border="2">
<tr style="background: #FFE4E1">
<th width="40"><font size="2" >序列</font></th>
<th width="90"><font size="2">区域经理</font></th>
<th width="80"><font size="2">区域主任</font></th>
<th width="70"><font size="2">店号</font></th>
<th width="200"><font size="2">店名</font></th>
</tr>
</table>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:400px;overflow:auto; position: relative;">
<table class="table" style="width: 95%" border="2">
<!-- 遍历数据部分-->
</table>
</div>
如果是单纯的table,遍历,那么我们可以引用bootstrap中的滚动监听来控制。
在页面引入
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
在body中引入
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- 此部分是固定表头,单独放入一个表中-->
<table class="table" style="width: 95%" border="2">
<tr style="background: #FFE4E1">
<th width="40"><font size="2" >序列</font></th>
<th width="90"><font size="2">区域经理</font></th>
<th width="80"><font size="2">区域主任</font></th>
<th width="70"><font size="2">店号</font></th>
<th width="200"><font size="2">店名</font></th>
</tr>
</table>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:400px;overflow:auto; position: relative;">
<table class="table" style="width: 95%" border="2">
<!-- 遍历数据部分-->
</table>
</div>
相关文章推荐
- JSP表格的表头固定不动
- 关于解决移动页面固定宽度 缩放显示
- 【jsp】jsp页面表格和表头的拼接
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现
- 关于ASP.NET 如何固定表格表头(fixed header) 【转载】
- jsp表格的表头固定不动
- <学习笔记>jsp页面画表格固定列数的方法
- 一个关于JSP页面生成相关表格的问题
- 关于背景图片固定 不会随着页面滚动而变化,及定位注意问题
- 关于servlet和JSP中几种页面重定向方法的疑惑
- 关于JSP 页面中用绝对路径显示图片
- 关于js传参到jsp页面乱码问题
- 关于viewport的移动页面适配
- 关于jsp文件在页面上显示乱码的问题
- 简单实现固定表格的上表头、左表头
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于在JSP页面中为什么一定要用${pageContext.request.contextPath}来获取项目路径,而不能用${request.contextPath}?
- 关于jsp页面下载word文件
- 固定表头带滚动条的HTML表格
- 文字超出隐藏并显示省略号,表格固定表头,两表格左右对齐,