Есть ли способ закрепить оба thead в верхней части страницы?

Question

Мне нужно, чтобы обе эти страницы были зафиксированы в верхней части страницы.На данный момент, только первая thead работает так, как я хочу.

Я пробовал position: sticky, class="position-sticky", class="position-absolute и т. Д. "И все решения, предложенные boostrap с class, но основнойДля меня проблема заключается в том, что две эти группы принадлежат двум разным таблицам, одна для заголовка и одна для основного раздела. Если используется class: fixed-top, это работает (хотя и только для первой главы), но затем оно также охватывает частьтаблица, которая не должна происходить.

Вот мой JSFiddle: https://jsfiddle.net/m_tibo/yf8a0txL/15/

То, чего я хотел бы достичь, - это уметь и прокручивать вниз, удерживая обе эти точки фиксированными навершина. Пока я могу достичь только первого.

Спасибо за вашу помощь.

Answer 1

Вы можете заменить свой 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%;
}

Это рабочая скрипка