Sticky Tabel problemen

[Darghon]

Goede dag
ik zal eerst even de situatie schetsen

aan de hand van gegevens in een database wordt er een datagrid in php (table) gegenereerd, deze table heeft 100+ rijen, en 30+ colommen. Volledig variable aan de hand van de database.

Omdat er te veel gegevens zijn voor 1 scherm, wordt er gewerkt met scrollbars.
Maar, hierdoor verdwijnen de tabel titels. Dit heb ik opgelost door de title tr tag sticky te maken. Maar, ook de eerste 4 colommen moeten sticky zijn, zodat ze blijven staan als er horizontaal gescrolled wordt.

Ik zoek voor dit laatste een snelle oplossing, hopelijk aan de hand van het colgroup element. maar tot nu toe ben ik er niet in geslaagd dit te laten functioneren.

werken met IFrames is ook onmogelijk voor deze toepassing.
Als iemand een mogelijke oplossing weet, of een prachtig alternatief, gelieve dit dan mee te delen.

met vriendelijke groeten
Darghon

 

[hackerfrans]

Hier is een voorbeeld met 1 vaste kolom en vaste titels. Misschien helpt het je verder.

 

[Darghon]

Bedankt, volgens die methode kon ik het niet oplossen, maar via de javascript code waar de "locked" classe werd toegeweze kon ik een andere functie schrijven die mijn 3-4 colummen vast kon zetten.

Indien iemand geintereseerd is in dit stukje code:

window.onload = function(){
  hpos = -20; //Start positie van de colom
  hold = 0;
}

window.onscroll = function(){
  hpos += document.body.scrollLeft - hold;
  hold = document.body.scrollLeft;

  //Set colum position
  lockCol('gridTable');
}

function lockCol(tblID) {
	var table = document.getElementById(tblID);
	var cTR = table.getElementsByTagName('TR');  //collection of rows
	for (i = 0; i < cTR.length; i++)
	{
		tel = 4; //aantal kolommen vast te zetten
		for(j = 0;j < tel; j++){
			if(tr.cells[j].innerHTML != ""){//controle of het een leeg veldje is of niet.
				tr.cells[j].style.position = "relative"; //zorgen dat het kan bewogen worden
				if(hpos >= 0){
					tr.cells[j].style.left = hpos.toString();
				}else{
					tr.cells[j].style.left = "0";
				}
			}
		}
	}
}

Hopelijk kan deze functie iemand anders ook ooit tepas komen