Bram
Legacy Member
Gegroet
Ik heb een pagina waar een gigantische tabel op komt met behoorlijk wat data.
Om de boel wat overzichtelijk en gebruiksvriendelijk te houden, had ik gedacht om de linkerkolom vast te zetten (hier staan namen in) en de gebruiker toelaten om te scrollen met de feitelijke gegevens indien de tabel breder wordt dan de viewport.
Hoe heb ik dit opgelost:
Twee divs: 1 met vaste breedte en 1 die de rest van de breedte inneemt, met overflow-x: scroll. Dit concept op zich werkt goed, alleen zat ik met het probleem dat de rijhoogtes van mijn twee tabellen niet klopten. Ook staan er in de tabellen een aantal knopjes die de rijhoogte (kunnen) doen veranderen. Daarom heb ik een functie gemaakt in javascript die de twee corresponderende rijhoogtes vergelijkt en de hoogte gelijk stelt aan de hoogste rij.
Javascript ziet er zo uit:
Dit voelt echter niet goed aan. De code bugt trouwens verschrikkelijk in Internet Explorer 7 (ondersteunen we nog): elke keer wordt de padding+border bijgeteld, waardoor de rijen blijven groeien.
Zijn er mensen die een oplossing kennen zonder javascript? Suggesties hebben om code performanter te maken?
Ik heb een pagina waar een gigantische tabel op komt met behoorlijk wat data.
Om de boel wat overzichtelijk en gebruiksvriendelijk te houden, had ik gedacht om de linkerkolom vast te zetten (hier staan namen in) en de gebruiker toelaten om te scrollen met de feitelijke gegevens indien de tabel breder wordt dan de viewport.
Hoe heb ik dit opgelost:
Twee divs: 1 met vaste breedte en 1 die de rest van de breedte inneemt, met overflow-x: scroll. Dit concept op zich werkt goed, alleen zat ik met het probleem dat de rijhoogtes van mijn twee tabellen niet klopten. Ook staan er in de tabellen een aantal knopjes die de rijhoogte (kunnen) doen veranderen. Daarom heb ik een functie gemaakt in javascript die de twee corresponderende rijhoogtes vergelijkt en de hoogte gelijk stelt aan de hoogste rij.
Javascript ziet er zo uit:
Code:
function fixRowHeights()
{
$('#PuntenKop tr').each(function() {
var trIndex = $(this).index() + 1; // index + 1, for use with nth-child(n)
var KopTr = $(this);
var PuntTr = $('#PuntenOverzicht tr:nth-child('+trIndex+')');
var tempHeight = Math.max(KopTr.height(), PuntTr.height());
PuntTr.height(tempHeight);
KopTr.height(tempHeight);
});
}Dit voelt echter niet goed aan. De code bugt trouwens verschrikkelijk in Internet Explorer 7 (ondersteunen we nog): elke keer wordt de padding+border bijgeteld, waardoor de rijen blijven groeien.
Zijn er mensen die een oplossing kennen zonder javascript? Suggesties hebben om code performanter te maken?