Not the same in other browsers
I was trying to find a way how to achieve fixed height for table's body, after some time, I finally found solution, but now this code won't work exactly the same way like in Chrome browser.
GOAL: trying to make code to work in different browsers (works in Chrome, but not in Firefox)
TRIED: I thought, maybe I need prefixes, but nothing changed. I think the issue is with table's container height, but not sure how to fix it now, without breaking inner code
Codepen: https://codepen.io/aurasp/pen/BavexOa
PS. code can look a little not clean, also added photo how it should look like
9 Replies
What's broken? It looks the same to me in FF and Chrome
what?
thats how it looks like for me
That's what it looks like to me in both
Just that one scrollbar is dark on FF
ahh, well it should look like in the original photo i added
i mean not about the scrollbar, about whole layout
table's container takes hieight as much as needed to show table's tbody max content, even though there are header and footer that has height (which is those blue sections).
if i add to the <main> tag, it fixes whole layout, but then table breaks
or if i remove overflow from the <main> and add fixed height for <tbody> (not in %) then it works