[HTML/CSS] Scrollbars op een lijst met rijen en kolommen

[Michali]

Ik heb een component in JS geschreven dat een lijst met verschillende kolommen en rijen kan weergeven. Dat lukt goed, alleen krijg ik het scrollen niet helemaal voor elkaar zoals ik het graag zou willen.

Ik wil de mogelijkheid voor zowel een horizontale als een verticale scrollbar. Als er meer rijen zijn dan dat er in het weergave gebied passen, dan moet er logischerwijs een verticale scrollbar komen. Als de kolommen breder zijn dan wat in het weergave gebied past, dan moet er dus een horizontale scrollbar komen.

Het probleem ontstaat wanneer beide scrollbars worden weergegeven. Met de verticale scrollbar wil ik de rijen kunnen scrollen zonder dat de headers van de kolommen meescrollen; deze moeten gewoon blijven staan. Met de horizontale scrollbar, echter, wil ik zowel de rijen als de headers van de kolommen kunnen scrollen. Anders scroll ik de rijen zonder dat deze meegaan.

Hier een illustratie () van hoe ik de scrollbars ongeveer geplaats zou willen hebben:



Puur met CSS gaat dit mij voorlopig niet lukken. Ik zou iig. niet weten hoe. Voor de verticale scrollbar plaats ik de rijen in een eigen container waarop ik overflow-y: auto; op instel. Ik zou de rijen en de kolommen dan ook weer in een container kunnen zetten met overflow-x: auto;, maar dan zou de verticale scrollbar ook mee scrollen, en helemaal aan het einde van de rijen staan, niet wat ik zoek dus.

Een andere optie is om iets te gaan uitvogelen met de onscroll event van de container van de rijen en dan een negatieve linker margin op de container van de headers van de kolommen. Dit wil ik echter wel graag vermijden als het kan. Iemand nog een suggestie?

[sopsop]

aangezien dit imho overduidelijk tabulaire data is, kun je dit het beste in een tabel zetten.

Vervolgens kun je gaan scrollen met behulp van de tbody. (google is your friend 'html tbody scroll')

[BikkelZ]

Inderdaad, als je netjes THEAD TBODY en TFOOT gebruikt, dan heb je dus al aparte containers voor je headers, footers en inhoud. Overigens gedraagt TBODY zich in sommige opzichten nog wel een beetje typisch als container, maar voor deze toepassing werkt het perfect.

[Michali]

Met tabellen heb ik gewerkt, maar die zijn te beperkt voor mijn wensen. Ik wil aan bepaalde rijen bijvoobeeld knoppen toevoegen voor paging toevoegen, op een manier die met tabellen niet mogelijk of netjes is. Overigens vindt IE die dingen helemaal niet leuk, niet zoals ik ze behandel. Ik ben weer terug gegaan naar ander soort elementen. Semantiek is niet belangrijk in dit geval, dus daar hoef ik niet over na te denken. Dit probleem is overigens veel gemakkelijker zonder tabellen op te lossen dan met. Ik heb al een oplossing geïmplementeerd, wat ik als laatste noemde, dus het werkt zo op zich al goed. Maar ik ben wel benieuwd naar andere suggesties nog, als die er zijn.

[BikkelZ]

Dan heb je dus een probleem gecreeerd wat je hier niet beschrijft: je moet namelijk heel ver gaan wil een tabel geen goede oplossing zijn voor tabulaire data. Wat heb je dan precies gedaan?

[Michali]

Ik heb geen probleem gecreëerd. Ik ben qua styling al veel verder dan wat met tabellen uberhaubt goed mogelijk was. Zeker dat scrollen zoals ik het hier wil is onmogelijk met een tabel. (Zeker in IE, het zou in FF misschien net kunnen.) Hier een paar screenshots die het correcte gedrag tonen:

Screen 1:
Nog niet gescrolled, de headers en rijen staan in begin positie.

Screen 2:
Verticaal gescrolled, de headers staan nog in begin positie en de rijen zijn iets verplaatst. Dit is in FF nog mogelijk met tabellen, maar niet meer in IE.

Screen 3:
Ook horizontaal gescrolled, de headers zijn horizontaal verplaats samen met de rijen. De verticale scrollbar blijft op zijn plek zoals hij was. Dit is (voor zover ik weet) onmogelijk met tabellen.