Закрепленный заголовок таблицы с CSS для компонента Element-UI

В моем коде я использовал таблицу element-ui (https://element.eleme.io/#/en-US/component/table) компонент. Это хорошо работает, но я хочу сделать заголовок таблицы липким.

Он предоставляет ему содержимое максимальной высоты / высоты, например: https://element.eleme.io/#/en-US/component/table#table-with-fixed-columns-and-header

Но я хочу использовать его так: https://codepen.io/chriscoyier/pen/PrJdxb

В CSS есть несколько хитростей, например:

th {
  background: white;
  position: sticky;
  top: 0;
  ...
}

Интересно, как я могу это реализовать? Есть какие-нибудь предложения?

Мой случай:

<div css="first-section">
  ...
</div>
<div css="second-section">
  ...
</div>
<el-table>
  ...
</el-table>

Пример: https://codepen.io/senolatac/pen/qBdGvRy.

Чтобы увидеть его в полноэкранном режиме: https://codepen.io/senolatac/full/qBdGvRy