Is it possible to have a table with a border and the rows scroll beyond the fold while the header is sticky? There should be additional space below the table as well.
I can get the space to show if the table doesn’t have a stroke but if it contains a stroke the bottom padding is below the last row but inside the stroke.
I’ve attached a mockup of what I’m trying to achieve.
Best answer by Vishal_Ramawat
Ok, I missed the overall border part, so here it is:
Created a Row component with side borders and a separator line.
Used it to create the Rows Frame.
Added a Header with side and top border and a separator line.
Page: Clip Content
Rows: Clip Content, Overflow: Vertical
Result:
Yes, it is possible. Use CSS to set the table’s header as sticky with position: sticky; top: 0;. Apply a scrollable container with a fixed height for the rows using overflow-y: scroll;. Ensure to add padding below the table to create additional space, and adjust the border to encompass the entire table, including the padding.
Ok, I missed the overall border part, so here it is:
Created a Row component with side borders and a separator line.
Used it to create the Rows Frame.
Added a Header with side and top border and a separator line.
Page: Clip Content
Rows: Clip Content, Overflow: Vertical
Result:
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.