如何在顶部滚动表头（thead），同时向下滚动带有固定头（navbar）的表行在bootstrap中？ [英] How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap?

查看：1171
本文介绍了如何在顶部滚动表头（thead），同时向下滚动带有固定头（navbar）的表行在bootstrap中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Bootstrap布局与 fixed-navbar 。

问题？当我滚动页面导航栏将在那里，因为它是固定的。因为我滚动更多我想要表格头固定在导航栏和表（表体）的内容滚动没有滚动条！



a href =http://codepen.io/MeghdadHadidi/pen/rpiav> Codepen





**小提琴** Bootstrap表





提及答案后可以工作！





HTML 





 <！ - 在此处包含所有网页内容 - > 
< div id =wrap> 
 
<！ - 修正导航栏 - > 
< div class =navbar navbar-default navbar-fixed-top> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃>项目名称< / a> 
< / div> 
< div class =collapse navbar-collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃about>关于< / a>< / li& 
< li>< a href =＃contact>联系人< / a>< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个操作< / a>< / li> 
< li>< a href =＃>这里还有其他内容< / a>< / li> 
< li class =divider>< / li> 
< li class =dropdown-header>导航标题< / li> 
< li>< a href =＃>分隔的链接< / a>< / li> 
< li>< a href =＃>一个单独的链接< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / div> 
 
<！ - 开始页面内容 - > 
< div class =container> 
< div class =page-header> 
< h1>有固定导航栏的粘滞页脚< / h1> 
< / div> 
< p class =lead>在桌面浏览器中使用此自定义HTML和CSS将固定高度的页脚固定到视口底部。已在< code>＃wrap< / code>中添加固定导航栏与< code> padding-top：60px;< / code> on< code> .container< / code>。< / p> 
 
< / div> 
< table class =table> 
< thead> 
< tr> 
< th>＃< / th> 
< th>名字< / th> 
< th>姓氏< / th> 
< th>用户名< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
 < td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
 
< div id =footer> 
< div class =container> 
< p class =text-muted credit>示例courtesy< a href =http://martinbean.co.uk> Martin Bean< / a>和< a href =http://ryanfait.com/sticky-footer/> Ryan Fait< / a>。< / p> 
< / div> 
< / div>


解决方案

使用：https://github.com/mkoryak/floatThead



文件：http://mkoryak.github.io/floatThead/examples/bootstrap3/ 

  $（document）.ready（function（）{
 $（sticky-header）。floatThead（{scrollingTop：50}）; 
}）;



DEMO with 2 Tables and Fixed Header： http://jsbin.com/zuzuqe/1/



http://jsbin.com/zuzuqe/1/edit





HTML 

 < 
< div class =navbar navbar-default navbar-fixed-top> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃>项目名称< / a> 
< / div> 
< div class =collapse navbar-collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃about>关于< / a>< / li& 
< li>< a href =＃contact>联系人< / a>< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个操作< / a>< / li> 
< li>< a href =＃>这里还有其他内容< / a>< / li> 
< li class =divider>< / li> 
< li class =dropdown-header>导航标题< / li> 
< li>< a href =＃>分隔的链接< / a>< / li> 
< li>< a href =＃>一个分隔的链接< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / div> 
 
<！ - 开始页面内容 - > 
< div class =container> 
< div class =page-header> 
< h1>有固定导航栏的粘滞页脚< / h1> 
< / div> 
< p class =lead>在桌面浏览器中使用此自定义HTML和CSS将固定高度的页脚固定到视口底部。已在< code>＃wrap< / code>中添加固定导航栏与< code> padding-top：60px;< / code> on< code> .container< / code>。< / p> 
 
< table class =table table-striped sticky-header> 
< thead> 
< tr> 
< th>＃< / th> 
< th>名字< / th> 
< th>姓氏< / th> 
< th>用户名< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< / tbody> 
< / table> 
 
 
< h3>表2< / h3> 
 
 
< table class =table table-striped sticky-header> 
< thead> 
< tr> 
< th>＃< / th> 
< th>新表< / th> 
< th>姓氏< / th> 
< th>用户名< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< tr> 
< td> 1< / td> 
< td>标记< / td> 
< td> Otto< / td> 
< td> @ mdo< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td> Jacob< / td> 
< td> Thornton< / td> 
< td> @ fat< / td> 
< / tr> 
< tr> 
< td> 3< / td> 
< td> Larry< / td> 
< td> the Bird< / td> 
< td> @ twitter< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div>





CSS p> 

  body {
 padding-top：50px; 
} 
 table.floatThead-table {
 border-top：none; 
 border-bottom：none; 
 background-color：#fff; 
}


Bootstrap layout with fixed-navbar. Having table with so many rows in body.

Issue? As i scroll the page navigation-bar will be there because it is fixed. as i scroll more i want table header to be fixed under navigation-bar and the content of table(table-body) scrolls without scroll bar!

Something like This - Codepen

**Fiddle ** Bootstrap table

Working Fiddle after referring to the answer!

HTML

<!-- Wrap all page content here -->
<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed navbar</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>

  </div>
<table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
</div>

<div id="footer">
  <div class="container">
    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>

解决方案

Use: https://github.com/mkoryak/floatThead

Docs: http://mkoryak.github.io/floatThead/examples/bootstrap3/

$(document).ready(function(){
    $(".sticky-header").floatThead({scrollingTop:50});
});

DEMO with 2 Tables and Fixed Header: http://jsbin.com/zuzuqe/1/

http://jsbin.com/zuzuqe/1/edit

HTML

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed navbar</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>

<table class="table table-striped sticky-header">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>


    <h3>Table 2</h3>


    <table class="table table-striped sticky-header">
        <thead>
          <tr>
            <th>#</th>
            <th>New Table</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
</div>

CSS

body{
    padding-top:50px;
}
table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #fff;
}

这篇关于如何在顶部滚动表头（thead），同时向下滚动带有固定头（navbar）的表行在bootstrap中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆