Привязка заголовка таблицы к ее основной части при скроллинге и уменьшении разрешения браузера

[sky-sky]

https://jsfiddle.net/alex_romanov/e1La6tso/#&togetherjs=CiDcpQS5Sd

 

Как привязать заголовок таблицы к ее основной части при скроллинге и уменьшении разрешения браузера

При уменьшении появляются 2 скроллинга, как и задумано, так как таблицы в основном большие,
но уменьшается до определенного момента, а затем заголовок фиксируется, а информационная часть уменьшается в
свою область.

Как это можно исправить?

Пытался придумать и для адаптации размеры ширины, но ничего не получается, подскажите что исправить.
 

[spdif]

.table-header { display: table; }

 

[sky-sky]

Да проблема рассинхронизации заголовка и основной части таблицы решена, но теперь я не могу регулировать высоту таблицы.

Получается при изменении разрешения  меняется вся страницы и скролл действует целиком на нее, Но пользователь должен видеть несколько последних   введенных строк, и внизу таблицы находятся поля для ввода данных, которые он тоже должен видеть в таблице

Сами таблицы могут иметь сотни записей.