HI,
I used the CSS below to fix table header, but I can't figure out how to avoid the visualization issue like the one highlighted in red in the attached image: when scrolling, the checkbox of each row is visible on top of the header and there is also a line of pixel of the underlying row that is still visible.
Someone knows if there is a way to avoid this tedious issue?
table { text-align: left; position: relative; border-collapse: collapse; }th { background: white; position: sticky; top: 0; }
you could remove the border on the table and add it to the wrapper container.
this is your css with some alterations, I think it looks decent :
- removed border on the table and added it to the wrapper
- the table selector should be on class, not element, because of specificity
- i thought is was nicer to make the whole header row sticky, instead of each individual header cell
- have 4 separate values for border radius, because it looks funny on the scroll bar otherwise
Hi @Daniele Betti ,Please check the below linkhttps://success.outsystems.com/documentation/how_to_guides/front_end/how_to_scroll_records_in_a_table_with_a_fixed_header/RegardsKrishnanand Pathak
Hi @Krishnanand Pathak
I've already checked that guide but I would prefer to avoid creating 2 tables, one for header and the other for data.
In addition it makes use of fixed table layout, but i need an auto layout.
Thank you, Daniele
Hi Daniele,
I agree, that solution proposed by Outsystems is not ideal, as it kills the flexibility of column widths adjusting to content.
The answer will be in looking at what exactly is going on with chrome dev tools and adjusting to avoid that, if I would have to guess, i'd say it will be in the area of maybe margins and z-index.
If you share an oml demonstrating the problem, I'll have a look.
Dorine
Hi Dorine, thank you.
In the meantime I found some solutions to my issue, but it still remains a little one: when scrolling down the table records the top border disappear.
I looked around but it seems there is no solution currently... look at the attached oml.
Daniele
Great! It works perfectly.
Thank you!
Hi @Daniele Betti ,
Small follow up :
I would not bring that z-index to 999, but something like 200
reason : the backdrop of a popup has 250, so if you at some point would use popups together with this scrollable table, the header would poke through the backdrop.
Thx a lot, you're right.
I indeed needed to lower that to avoid issues with some popups.