如何在引导程序 3 中向下滚动带有固定标题（导航栏）的表格行时将表格标题（标题）粘贴在顶部？
Posted
技术标签:
【中文标题】如何在引导程序 3 中向下滚动带有固定标题（导航栏）的表格行时将表格标题（标题）粘贴在顶部？【英文标题】：How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3? 【发布时间】：2014-09-10 11:33:05 【问题描述】：带有fixed-navbar 的引导布局。有这么多行的表格。
问题？当我滚动页面时，导航栏会在那里，因为它是固定的。当我滚动更多时，我希望将表头固定在导航栏下，并且表（表体）的内容在没有滚动条的情况下滚动！
类似这样的东西 - Codepen
**小提琴**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>
【问题讨论】：
你应该看看affix 这个插件做你想做的事情codepen.io/MeghdadHadidi/pen/rpiav 如何实现？ @查理 粘滞菜单可能会对您有所帮助。 如果使用 Bootstrap 4，您可以在所有th 上使用 .sticky-top。如果你也有一个粘性nav，那么你将不得不为table tr th.sticky-top top: 70px; 添加CSS。
【参考方案1】：
这可以在没有 JS 的情况下完成，只需要纯 CSS。因此，任何尝试为现代浏览器执行此操作的人都应该考虑改用position: sticky。
目前，Edge 和 Chrome have a bug 其中position: sticky 不适用于thead 或tr 元素，但是可以在th 元素上使用它，所以您需要做的就是只需将其添加到您的代码中：
th
position: sticky;
top: 50px; /* 0px if you don't have a navbar, but something is required */
background: white;
注意：您需要为它们设置背景颜色，否则您将能够透过粘性标题栏看到。
这里有very good browser support。
使用您的代码进行演示（HTML 未更改，添加了 5 行以上的 CSS，删除了所有 JS）：
body
padding-top:50px;
table.floatThead-table
border-top: none;
border-bottom: none;
background-color: #fff;
th
position: sticky;
top: 50px;
background: white;
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- 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 Table Headers</h1>
</div>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</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>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<p class="lead">If the page is tall and all of the table is visible, then it won't stick. Make your viewport short.</p>
<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>【讨论】：
对当前浏览器的完美回答。 如果你的父母有溢出，这不起作用 如果父级是引导响应 div 则不起作用 你应该能够为每一行添加不同的偏移量，不是吗？ 感谢“头虫”提示！【参考方案2】：使用：https://github.com/mkoryak/floatThead
文档：http://mkoryak.github.io/floatThead/examples/bootstrap3/
$(document).ready(function()
$(".sticky-header").floatThead(top:50);
);
带有 2 个表格和固定标题的演示：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;
【讨论】：
看起来很棒！但不能在我的小提琴中工作！试...！如果可以的话，请用你的代码更新我的小提琴！ 你需要展示你试图得到工作的小提琴这是基本的东西。链接到脚本的外部资源，在jQuery之后加载，如果无法加载外部资源，请发布完整的脚本，然后粘贴初始化和CSS。但是，与 JSBin 相比，Fiddle 是一个非常糟糕的环境。 效果很好 ,,, 看看我的jsfiddle.net/ashikjs 谢谢。仅供参考，在当前版本中，参数现在被简单地称为top 而不是scrollingTop。它可以是一个int，也可以是一个函数。如果是函数，则每次调用floatThead('reflow') 时都会再次运行。
我们不需要 jQuery。 -1【参考方案3】：
您可以使用 puse CSS 轻松完成，无需任何类型的 JS。您必须在 table th 中添加 position: sticky; top: 0; z-index:999; 。但这不适用于 Chrome 浏览器，但不适用于其他浏览器。要在 chrome 上工作，您必须将这些代码添加到 table thead th
.table-fixed
width: 100%;
/*This will work on every browser but Chrome Browser*/
.table-fixed thead
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #000;
color: #fff;
/*This will work on every browser*/
.table-fixed thead th
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #000;
color: #fff;
<table class="table-fixed">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>【讨论】：
“这将适用于所有浏览器”是否意味着我不需要需要“这将适用于除 Chrome 浏览器之外的所有浏览器”版本，或者我需要 both 支持（几乎）一切和 Chrome？ 我使用这种技术做了一些工作示例。处理 x/y 滚动。 codepen.io/oswee/pen/xMQJVm 在 Chrome 中有效，但在 Safari 中无效【参考方案4】：任何在 2018 年之后寻找此功能的人：仅使用 CSS 使用 position:sticky 来做到这一点要干净得多。
position:sticky 不适用于 Chrome 中的某些表格元素 (thead/tr)。您可以将粘性移动到需要粘性的 tr 的 tds/ths。像这样：
thead tr:nth-child(1) th
background: white;
position: sticky;
top: 0;
z-index: 10;
【讨论】：
【参考方案5】：我遇到了同样的问题，正如大多数答案所示，您必须申请 position: sticky;和顶部：0； （大多数情况下，但如果有一个固定的导航栏，则可能会有所不同）到“th”元素。这些属性不适用于thead 或tr。
还有一件事，如果还是不行，就得找父级的“溢出”属性了。如果任何父组件有一个溢出集，即溢出：隐藏，那么位置：粘性就不起作用。确保删除所有此类父属性。超！
【讨论】：
在我的桌子上应用overflow: initial wrapper 使它出现在顶部！这个技巧非常有用！谢谢！ 编辑： 进一步说明，我之前设置了 overflow-x: auto，这就是为什么 initial 做到了这一点（相当于删除它）
你@Fusselldieb 是一个真正的英雄！在通过整个互联网寻求答案后，您的提示解决了我的问题！
@TimDaubenschütz 很高兴知道它对你有用 :)
我身上有overflow-x: hidden;，这也阻止了它的工作！【参考方案6】：
这是一个 jsfiddle HERE（不是我创建的），它可以在表格中使用纯 css 完成您正在寻找的事情。这里要注意的是第 th 标题设置为高度 0。在每个 th 内部都是绝对定位的 div，它将标题放在表格上方和表格所在的可缩放 div。
<thead>
<tr>
<th>#<div>#</div></th>
<th>First Name<div>First Name</div></th>
<th>Last Name<div>Last Name</div></th>
<th>Username<div>Username</div></th>
</tr>
</thead>
【讨论】：
当我滚动页面时，导航栏会出现，因为它是固定的。当我滚动更多时，我希望将表头固定在导航栏下，并且表（表体）的内容在没有滚动条的情况下滚动！ 谢谢你的回答，但我想要这个jsfiddle.net/DTcHh/1360它现在正在工作【参考方案7】：.contents
width: 50%;
border: 1px solid black;
height: 300px;
overflow: auto;
table
position: relative;
th
position: sticky;
top: 0;
background: #ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="contents">
<table class="table">
<thead>
<tr>
<th>colunn 1</th>
<th>colunn 2</th>
<th>colunn 3</th>
<th>colunn 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
<td>Example 4</td>
<tr>
</tbody>
</table>
</div>【讨论】：
您能否进一步解释一下它是如何工作的？或将此代码转换为用户可以看到它工作的片段。 我这里做了一个例子codepen.io/pen/?template=poyrbGw【参考方案8】：我使用jQuery Waypoints 完成了类似的操作。
有很多活动部分和相当多的逻辑（我希望有一天能在 GitHub 上发布），但基本上你可以做的是......
-
在 javascript 中复制表 DOM 结构并添加一个名为
fixed 的类。
为table.fixed 添加使其不可见的样式。
在标题导航底部设置一个路径点，将一个名为sticky 的类添加到table.fixed
为table.sticky.fixed 添加样式，将其定位在导航栏下方，同时使thead 内容可见。这也有一个z-index，因此它位于其余内容之上。
添加另一个航路点，但在向下滚动事件中，从table.fixed 中删除.sticky
您必须复制整个表格 DOM 以确保列宽正确对齐。
如果这听起来很复杂，您可能想尝试使用 DataTables 插件和 FixedHeader 扩展：https://datatables.net/extensions/fixedheader/
【讨论】：
感谢您的回答，这很有帮助！见工作小提琴jsfiddle.net/DTcHh/1360【参考方案9】：如果你想在你的标题上添加一个词缀，你可以使用这个技巧，在你的 th 上添加 position: relative 并在 eventListener('scroll') 中更改位置
我创建了一个例子：https://codesandbox.io/s/rl1jjx0o
我使用 vue.js，但你可以使用它，无需 vue.js
【讨论】：
【参考方案10】：Okku 的帖子在 Edge 中为我工作。 为了在 iPhone 上得到想要的结果，我不得不使用：
<thead class="sticky-top">
不影响 Edge。
【讨论】：
以上是关于如何在引导程序 3 中向下滚动带有固定标题（导航栏）的表格行时将表格标题（标题）粘贴在顶部？的主要内容，如果未能解决你的问题，请参考以下文章