有没有办法将两个 thead 都固定在页面顶部？

Question

我需要将两个 thead 都固定在页面顶部。目前，只有第一个 thead 可以正常工作。

我已经尝试了 position: sticky、class="position-sticky"、class="position-absolute 等”以及 boostrap 与 class 提出的所有解决方案，但对我来说主要问题是这两个 thead 属于两个不同的 table，一个用于 header，一个用于主要部分。如果使用 class: fixed-top 它会起作用（即使只针对第一个 thead），但它也会覆盖 table 的一部分，这是不应该发生的事情。

这是我的 JSFiddle： https://jsfiddle.net/m_tibo/yf8a0txL/15/

我想要实现的是能够向下滚动，同时将两个广告固定在顶部。目前只能做到第一个

感谢您的帮助。

Answer 1

你可以用这个代替你的CSS。您本质上要寻找的是 position:fixed。把它放在 parent 中，header 就会粘住。您可能需要调整一些填充和边距以获得所需的结果，但这应该可以解决棘手的问题。

用这个替换你的代码块 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%;
}

This is a working fiddle

有没有办法将两个 thead 都固定在页面顶部？

Is there a way to have both thead fixed at the top of the page?

javascript

css

css-position

bootstrap-4