Question

我需要将两个广告都固定在页面顶部。目前，只有第一个Thead可以按我的意愿工作。

我尝试了position: sticky，class="position-sticky"，class="position-absolute等”以及boostrap与class一起提出的所有解决方案，但对我而言，主要问题是两者thead属于两个不同的表，一个用于标题，一个用于主要部分。如果使用class: fixed-top，则它可以工作（即使仅适用于第一个主题），但它也可以覆盖表的一部分，这是不应该发生的。

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

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

谢谢您的帮助。

Answer 1

您可以以此替换CSS。您本质上在寻找的是position：fixed。将其放在父项中，标题将保留。您可能需要调整一些填充和边距才能获得理想的结果，但这应该解决粘性问题。

用此替换代码块 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

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

1 个答案: