In my live page, I have a section that has limited space based on the viewport size.
The layout includes:
- Content above the table
- Table with Header and Body
- Content below the table
Currently, the section overflows due to having too many items in the table. I want to make it scrollable while keeping the content above at the top and the content below at the bottom of the available space.
I need the table body to occupy the available space, maintaining the placement of the content above and below.
How can I achieve this?
* {
color: #ffffff;
}
section
{
height: 200px;
}
section .table-wrapper {
background-color: #202020;
padding: 0;
}
...
...To address this issue, I utilized CSS Grid and set appropriate sizes for each element, separating the three parts into multiple elements (the footer was included within an element along with the table). The remaining task is to resolve the table header alignment.
section .table-wrapper {
//...
display: grid;
grid-template-rows: fit-content(100%) auto fit-content(100%);
grid-template-areas: "header" "main" "footer";
}
section .row {
//...
flex-wrap: nowrap;
}
...
...