如何在引导程序 3 中向下滚动带有固定标题(导航栏)的表格行时将表格标题(thead)粘贴在顶部? [英] How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

查看：34
本文介绍了如何在引导程序 3 中向下滚动带有固定标题(导航栏)的表格行时将表格标题(thead)粘贴在顶部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

带有 fixed-navbar 的 Bootstrap 布局.正文中有这么多行的表格.

问题?当我滚动页面导航栏时，它会在那里，因为它是固定的.当我滚动更多时，我希望表格标题固定在导航栏下，表格(表格正文)的内容在没有滚动条的情况下滚动！

类似的东西 - Codepen

<小时>

**Fiddle ** 引导表

<小时>

参考答案后工作小提琴！

<小时>

HTML

<小时>

<!-- 将所有页面内容包装在这里--><div id="包裹"><!-- 固定导航栏--><div class="navbar navbar-default navbar-fixed-top"><div class="容器"><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><a class="navbar-brand" href="#">项目名称</a>

<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="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">分隔链接</a></li><li><a href="#">一个单独的链接</a></li></div><!--/.nav-collapse -->

<!-- 开始页面内容--><div class="容器"><div class="page-header"><h1>带有固定导航栏的粘性页脚</h1>

<p class="lead">使用此自定义 HTML 和 CSS 将固定高度的页脚固定到桌面浏览器的视口底部.<code>#wrap</code> 中添加了一个固定的导航栏.使用 <code>padding-top: 60px;</code>在 <code>.container</code>.</p>

<table class="table"><头><tr><th>#</th><th>名字</th><th>Last Name</th><th>用户名</th></tr></thead><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody>

<div id="页脚"><div class="容器"><p class="text-muted credit">示例礼貌<a href="http://martinbean.co.uk">Martin Bean</a>和<a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>

解决方案

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

文档:http://mkoryak.github.io/floatThead/examples/bootstrap3/

$(document).ready(function(){$(".sticky-header").floatThead({top: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"><按钮类型=按钮"class =导航栏切换"数据切换=折叠"数据目标=.navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand";href=#">项目名称</a>
<div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href=#about">关于</a></li><li><a href=#contact">联系方式</a></li>
  • <a href="#";类=下拉切换"；data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href=#">动作</a></li><li><a href=#">另一个动作</a></li><li><a href=#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href=#">分隔链接</a></li><li><a href=#">另外一个单独的链接</a></li>
    • <!--/.nav-collapse -->
    <!-- 开始页面内容--><div class="container"><div class="page-header"><h1>带有固定导航栏的粘性页脚</h1>
    <p class="lead">使用此自定义 HTML 和 CSS，将固定高度的页脚固定到桌面浏览器中视口的底部.<code>#wrap</code> 中添加了一个固定的导航栏.使用 <code>padding-top: 60px;</code>在 <code>.container</code>.</p><table class="table table-striped sticky-header"><头><tr><th>#</th><th>名字</th><th>Last Name</th><th>用户名</th></tr></thead><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody><h3>表2</h3><table class="table table-striped sticky-header"><头><tr><th>#</th><th>新表</th><th>Last Name</th><th>用户名</th></tr></thead><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr><tr><td>1</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><td>2</td><td>雅各</td><td>桑顿</td><td>@fat</td></tr><tr><td>3</td><td>拉里</td><td>鸟</td><td>@twitter</td></tr></tbody>

    CSS

    body{填充顶部:50px;}table.floatThead-table {边框顶部:无；边框底部:无；背景色:#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({top: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;
}

    这篇关于如何在引导程序 3 中向下滚动带有固定标题(导航栏)的表格行时将表格标题(thead)粘贴在顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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