您的位置:首页 > Web前端 > JavaScript

关于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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: