登录
当前位置： 首页 > 面试题库 >

在Bootstrap 3中使用固定标题（navbar）向下滚动表格行时，如何在顶部放置表格标题（thead）？

柯耀
2023-03-14
问题内容：

引导布局fixed-navbar。桌子上有很多行。

问题？ 当我滚动页面导航栏将在那里，因为它是固定的。当我滚动更多时，我希望将表标题固定在导航栏中，并且table（table-body）的内容滚动而没有滚动条！

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>

问题答案：

$(document).ready(function(){
$(“.sticky-header”).floatThead({top:50});
});

具有2个表和固定标题的DEMO：

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;
}


 类似资料：
  • 冻结/固定表格的顶部标题行

    问题内容： 在此处输入图片说明我需要你的帮助。我不确定如何冻结表或表的第一行，其中包含要冻结的标题，而我却可以滚动表？仅使用CSS标记而不使用Javascript框架，我将如何实现这一目标？ 问题答案： 将以下内容添加到CSS中。 试试这个代码

  • 滚动至表格视图标题顶部

    我有一个标题，占据了整个屏幕。 每次应用程序进入后台，然后回到前台/活动，我希望屏幕被设置回标题顶部。 我只见过与滚动到表格顶部有关的答案，这些答案使用类似于，但是不起作用，因为它只滚动回UITableView的第0行0，而不是UITableView标题的顶部。 有什么想法吗？ 谢谢 编辑：尝试了这个 下面是一些值得注意的表格设置代码：

  • 仅冻结html表的顶部行（固定表标题滚动）

    问题内容： 我想制作一个冻结顶部行的html表（因此，当您垂直向下滚动时，总是可以看到它）。 有没有使这种情况发生的聪明方法，而无需使用javascript？ 请注意，我不需要冻结左列。 问题答案： 如果没有JavaScript，您将无法有效实现这一目标……特别是如果您想要跨浏览器支持。 您采取的任何方法都有很多问题，特别是关于跨浏览器/版本支持的问题。 编辑： 即使不是您要修复的标头，而是数据的

  • 仅CSS可滚动表格，带有固定标题[重复]

    我有一个解决方案，通过它，我可以使用minor jQuery和CSS创建带有固定页眉/页脚的可滚动表，但我正在寻找一种方法，使其成为唯一一个跨浏览器兼容的CSS解决方案。 明确地说，我想要做的是只使用一个标记（它是有效的子标记，，，，，，，，），但采用一组满足以下条件的CSS规则： 必须在页眉/页脚/内容行之间保持列对齐 必须允许页眉/页脚在内容垂直滚动时保持固定 必须不需要任何jQuery或其他

  • 如何在可滚动的div中制作固定的标题表？

    问题内容： 我想固定表格的标题。表格位于可滚动div中。下面是我的代码。 以下是我用于以上div的CSS： 问题答案： 怎么做这样的事情？我从头开始… 我所做的是使用2个表，一个表用于标题，该表始终是静态的，而另一个表呈现单元格，我使用固定高度的元素包装了这些单元格，并启用了滚动， 还要确保您使用固定宽度的元素，以便在使用不带字符串的情况下不会断线，以便在使用时断开该字符串

  • 如何在滚动时始终将标题保持在顶部？

    问题内容： 我如何避免滚动页面的其余部分？我考虑过使用和，只是想知道是否有更简单，更用户友好的方法，这样做的最佳实践是什么？ 问题答案： 使用的包含您的头，喜欢的东西 在此示例中，当开始时位于下方100px处，但随着用户滚动，它保持原位。当然，不用说，您需要确保有背景，以便当两个s重叠时，其内容实际上是可见的。

相关阅读

如何在可滚动的div内制作固定的标题表？具有固定标题的纯CSS滚动表在打印模式下重复表格标题JS实现table表格固定表头且表头随横向滚动而滚动具有固定标题的HTML表？

相关文章

Bootstrap5 表格HTML 表格CSS表格jQuery Mobile 表格Bootstrap 页面标题

相关问答

如何创建左导航抽屉时，顶部标题的标志是固定的，菜单项滚动，并显示在类别标题？在kableExtra（）中设置标题格式带有水平滚动条和垂直滚动条的固定标题表GoogleSheetsAPI-如何在表格顶部追加新行？（Android）如何在rmarkdown html中的特定标题下放置脚注？

相关工具

首列固定的列表标准TVL格式数据解析双向滚动scrollview基于BeeFramework的表格控件bootstrap3-dialog

相关文档

C 语言编码风格和标准LeetCode 题解动画演示C 标准库 中文版Rails 风格指南JavaScript 风格指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.