Please check my comment below.

I don't think that will be responsive.

Flexbox to the rescue again. Just use separate divs for the header row container and the body rows, then html, body{height: 100%;} body{display: flex; flex-direction: column; justify-content:flex-start} container-fluid{overflow-y: auto}. Header row column alignment will have to be tweaked to account for scrollbar somehow, when present.

Great work! I'm wondering if it's possible, using this or something similar, to have the header row (rows if wrapped) stay pegged, so for large datasets you can scroll vertically and always have the headers visible.