Как сделать блок фиксированным в том случае если он при скроле находится вверху страницы?

Question

[Иван Дамаскин]

Всем привет. Есть таблица.

<h1>Table</h1>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

...
Так вот Если у нас в таблице например 100 строк. Появляется вертикальный скрол. При прокрутке таблицы, нужно что бы шапка таблицы tr + th стала фиксированной вверху и не прокручивалась.

Спасибо за рабочий пример.

Answer 1

[Александр Зачиналов]

www.fixedheadertable.com

Answer 2

[Павел Радьков]

codepen.io/paulradzkov/pen/sjyFb — вот пример без js, но у него есть свои ограничения:

• задать явно высоту таблицы
  
• ограничить min-width таблицы
  
• задать явно высоту фиксированного заголовка
  
• проставить ширины колонкам в px или % (можно использовать только одну колонку с «width:auto»)