Заголовок таблицы остается фиксированным сверху, когда пользователь прокручивает его вне поля зрения с помощью jQuery - PullRequest
Новая
       55

Заголовок таблицы остается фиксированным сверху, когда пользователь прокручивает его вне поля зрения с помощью jQuery

134 голосов
/ 17 января 2011

Я пытаюсь создать HTML-таблицу, в которой верхний колонтитул будет оставаться наверху страницы, когда И ТОЛЬКО, когда пользователь прокручивает его вне поля зрения.Например, таблица может быть на 500 пикселей ниже страницы, как мне сделать так, чтобы, если пользователь прокручивает заголовок вне поля зрения (браузер как-то обнаруживает, что его больше нет в окне Windows), он останется наверху?Кто-нибудь может дать мне решение Javascript для этого? 

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

Так что в приведенном выше примере я хочу, чтобы <thead> прокручивал страницу, если она выходит из поля зрения.

ВАЖНО: Я НЕ ищу решение, в котором <tbody> будет иметь полосу прокрутки (переполнение: авто).

Ответы [ 24 ]

0 голосов
/ 11 октября 2018

Исправьте вашу проблему с помощью этого 

tbody {
  display: table-caption;
  height: 200px;
  caption-side: bottom;
  overflow: auto;
}
0 голосов
/ 16 марта 2018

Я пробовал использовать преобразование : перевод .Хотя он хорошо работает в Firefox и Chrome, в IE11 просто нет функции.Нет двойной полосы прокрутки.Поддерживает таблицу tfoot и заголовок.Чистый Javascript, без jQuery.

http://jsfiddle.net/wbLqzrfb/42/

thead.style.transform="translate(0,"+(dY-top-1)+"px)";
0 голосов
/ 15 марта 2018

Я испробовал большинство из этих решений и в итоге нашел (IMO) лучшее современное решение:

CSS-сетки

С помощью CSS-сеток вы можете определить «сетку», и вы можете наконец-то создать красивое кросс-браузерное решение без использования JavaScript для таблицы с фиксированным заголовком и прокручиваемого содержимого. Высота заголовка может быть даже динамической.

CSS : отобразить в виде сетки и установить число template-rows: 

.grid {
    display: grid;
    grid-template-rows: 50px auto; // For fixed height header
    grid-template-rows: auto auto; // For dynamic height header
}

HTML : создать контейнер сетки и номер определенного rows: 

<div class="grid">
    <div></div>
    <div></div>
</div>

Вот рабочий пример:

CSS 

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.table {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto;
}
.table-heading {
  background-color: #ddd;
}
.table-content {
  overflow-x: hidden;
  overflow-y: scroll;
}

HTML 

<html>
    <head>
    </head>
    <body>
        <div class="table">
            <div class="table-heading">
                HEADING
            </div>
            <div class="table-content">
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
            </div>
        </div>
    </body>
</html>
0 голосов
/ 23 июня 2017

Этого можно достичь с помощью преобразования свойства стиля.Все, что вам нужно сделать, это обернуть вашу таблицу в некоторый div с фиксированной высотой и переполнением, установленным на auto, например: 

.tableWrapper {
  overflow: auto;
  height: calc( 100% - 10rem );
}

И затем вы можете присоединить к нему обработчик onscroll, здесь у вас есть метод, который находиттаблица обернута <div class="tableWrapper"></div>: 

  fixTables () {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

И вот рабочий пример этого в действии (я использовал bootstrap, чтобы сделать его красивее): fiddle

Длядля тех, кто также хочет поддерживать IE и Edge, вот фрагмент: 

  fixTables () {
    const tableWrappers = document.querySelectorAll('.tableWrapper')
    for (let i = 0, len = tableWrappers.length; i < len; i++) {
      tableWrappers[i].addEventListener('scroll', () => {
        const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
        const headers = tableWrappers[i].querySelectorAll('thead th')
        for (let i = 0, len = headers.length; i < len; i++) {
          headers[i].style.transform = translate
        }
      })
    }
  }

В IE и Edge прокрутка немного запаздывает ... но работает

Вот ответ, которыйпомогает мне узнать это: ответ

Страница:
...