In het kader van creatief denken: Zet je schuifbalk boven in plaats van onder.

Laatst kwam ik zo'n situatie tegen: Een klant had een brede en hoge tabel, waarbij de belangrijkste gegevens altijd boven in de kolommen staan. Zeg maar een soort prioriteitenlijst met voor iedere week een aparte kolom. Dan wil je niet eerst iedere keer naar beneden moeten scrollen, om daar met de horizontale schuifbalk naar rechts te scrollen en daarna weer naar boven te moeten scrollen om de hoogste prioriteiten te kunnen zien voor die week.

Uiteraard kun je de viewport van de hoogte van je tabel aanpassen, zodat die niet hoger wordt dan de hoogte van je scherm. Maar wat is er mis mee om dan eens de schuifbalk boven aan je scherm te plaatsen in plaats van onderaan.

Hiervoor hebben we wat kleine simpele CSS-aanpassingen nodig.

Eerst een klein voorbeeld van de uitgangssituatie (met de schuifbalk onder):

HTML
<div id="wrapper">
<table>
...
</table>
</div>

CSS
#wrapper {
overflow: scroll;
width: 1200px;
}
td {
width: 200px;
}

Het eerste trucje dat we uithalen zal direct al de schuifbalk bovenaan plaatsen, maar heeft toch een ongewenste bijwerking:

HTML
<div id="wrapper">
<table>
...
</table>
</div>

CSS
#wrapper {
overflow: scroll;
transform: rotateX(180deg);
width: 1200px;
}
td {
width: 200px;
}

Zoals je ziet heb ik hier alleen maar transform: rotateX(180deg) toegevoegd aan de wrapper. Daarmee staat weliswaar de scrollbar al boven, maar staat alles nu op zijn kop.

Met de volgende stap gaan we dat eenvoudig herstellen:

Dit doen we simpelweg door binnen de buitenste wrapper een 2^e wrapper toe te voegen die de inhoud nog een keer omdraait:

HTML
<div id="wrapper">
<div id="innerwrapper">
<table>
...
</table>
</div>
</div>

CSS
#wrapper {
overflow: scroll;
transform: rotateX(180deg);
width: 1200px;
}
#innerwrapper {
transform: rotateX(180deg);
}
td {
width: 200px;
}

U bent niet geautoriseerd om reacties te plaatsen.