Как сделать так, чтобы строки таблицы не растягивались?

Question

[Malkolm]

Кратко текстом:
есть таблица внутри блока. У блока заданная высота, а у таблицы через position: sticky закрепляются хедер и футер.
Кол-во строк в таблице динамическое - может быть одна строка, а может быть 200, при этом если строки не помещаются, то таблица скроллится.
Но вот если в таблице меньше строк, чем нужно чтобы заполнить полностью промежуток между хедером и футером, то высота строк увеличивается. Как сделать так чтобы этого не происходило не используя JS?
P.S.: таблице прописан height: 100%, чтобы футер был внизу всегда, если этого не сделать то футер прилипнет к последней строке

Пример на кодпене накидал

Comments

[Ankhena]

1. Добавить пустую строку с высотой auto, остальным задать фиксированную.
2. Использовать display grid + subgridи соответственно, свойства грида.

[Malkolm]

Ankhena, а по 2 пункту можно пример, пожалуйста

[Ankhena]

Malkolm, пример чего? Пример работы свойств align-self и т.д.? Ну смешно.

[Malkolm]

Ankhena, 1й вариант подошел. Спасибо. Но решением отметить не могу т.к. это не ответ а комментарий

[Ankhena]

Malkolm, написала в ответы ))

Answer 1

[Ankhena]

1. Добавить пустую строку с высотой auto, остальным задать фиксированную.
2. Использовать display grid + subgridи соответственно, свойства грида.

Comments

[Сергей delphinpro]

height:100% поменять на max-height: 100%

[Ankhena]

Сергей delphinpro, тогда tfoot не прилипнет, если я правильно поняла затею.