我需要将两个 thead 都固定在页面顶部。目前,只有第一个 thead 按我的意愿工作。
我已经尝试过 position: sticky
, class="position-sticky"
, class="position-absolute
, etc"和所有boostrap 用 class
提出的解决方案,但对我来说主要问题是这两个 thead 属于两个不同的表,一个用于标题,一个用于主要部分。
如果使用 class: fixed-top
它会起作用(即使只针对第一个 thead),但它也会覆盖表格的一部分,这是不应该发生的事情。
这是我的 JSFiddle: https://jsfiddle.net/m_tibo/yf8a0txL/15/
我想要实现的是能够向下滚动,同时将两个广告固定在顶部。目前,我只能实现第一个。
感谢您的帮助。
最佳答案
您可以用这个替换您的 CSS。您本质上正在寻找的是位置:固定。把它放在父级中,标题就会粘住。 您可能需要调整一些填充和边距以获得所需的结果,但这应该可以解决棘手的问题。
用这个替换你的代码块 HTML:
<section class="main">
<table id="maintable">
<thead class="maintable-header">
<tr class="second-header">
<th class="blankHeader"scope="col"></th>
<th class="tableHeader" scope="col">Role</th>
<th class="tableHeader" scope="col">Project</th>
<th class="tableHeader" scope="col">Credits</th>
<th class="tableHeader" scope="col">Year</th>
</tr>
</thead>
并添加这些 CSS 类:
.second-header {
position: fixed;
top: 9%;
background:#fff;
text-align: center;
}
.tableHeader {
width: 25%;
}
关于javascript - 有没有办法将两个 thead 都固定在页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54555886/