เลียนแบบ datagrid ใช้กับ php นะครับสำหรับกับคนที่ต้องการ fixed header table

<script language = "javascript" type="text/javascript">
function OnScrollDiv(Scrollablediv){
	document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
	document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}

function MakeStaticHeader(gridId, height, width, headerHeight, isFooter){
	var tbl = document.getElementById(gridId);
	if(tbl){
		var DivHR = document.getElementById('DivHeaderRow');
		var DivMC = document.getElementById('DivMainContent');
		var DivFR = document.getElementById('DivFooterRow');
		
		//Set DivHeaderRow Properties
		DivHR.style.height = headerHeight + 'px';
		DivHR.style.width = (parseInt(width) - 16) + 'px';
		DivHR.style.position = 'relative';
		DivHR.style.top = '0px';
		DivHR.style.zIndex = '10';
		DivHR.style.verticalAlign = 'top';
		
		//Set DivMainContent Properties
		DivMC.style.height = height + 'px';
		DivMC.style.width = width + 'px';
		DivMC.style.position = 'relative';
		DivMC.style.top = -headerHeight + 'px';
		DivMC.style.zIndex = '1';
		//DivMC.style.verticalAlign = 'top';
		
		DivFR.style.width = (parseInt(width) - 16) + 'px';
		DivFR.style.position = 'relative';
		DivFR.style.top = -headerHeight + 'px';
		DivFR.style.verticalAlign = 'top';
		DivFR.style.paddingtop = '2px';
		
			if(isFooter){
				var tblfr = tbl.cloneNode(true);
				tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
				var tblBody = document.createElement('tbody');
				tblfr.style.width = '100%'
				tblfr.cellSpacing = '0';
				tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
				tblfr.appendChild(tblBody);
				DivFR.appendChild(tblfr);
			}
		DivHR.appendChild(tbl.cloneNode(true));
	}
}
</script>
<div id="DivRoot" align='left'>
	<div style="overflow:hidden;" id="DivHeaderRow"></div>
	<div style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
		<table id='tblgrid'>
			<tbody>
				<tr style='background:#d3a0e8; height:50px;'>
					<td>............</td>
					<td>............</td>
					<td>............</td>
					<td>............</td>
					<td>............</td>
					<td>............</td>
				</tr>
				<tr>
					<td>fgdfgfdgdfgdfg 1</td>
					<td>fgdfgfdgdfgdfg 2</td>
					<td>fgdfgfdgdfgdfg 3</td>
					<td>fgdfgfdgdfgdfg 4</td>
					<td>fgdfgfdgdfgdfg 5</td>
					<td>fgdfgfdgdfgdfg 6</td>
				</tr>
							<tr>
					<td>fgdfgfdgdfgdfg 1</td>
					<td>fgdfgfdgdfgdfg 2</td>
					<td>fgdfgfdgdfgdfg 3</td>
					<td>fgdfgfdgdfgdfg 4</td>
					<td>fgdfgfdgdfgdfg 5</td>
					<td>fgdfgfdgdfgdfg 6</td>
				</tr>
							<tr>
					<td>fgdfgfdgdfgdfg 1</td>
					<td>fgdfgfdgdfgdfg 2</td>
					<td>fgdfgfdgdfgdfg 3</td>
					<td>fgdfgfdgdfgdfg 4</td>
					<td>fgdfgfdgdfgdfg 5</td>
					<td>fgdfgfdgdfgdfg 6</td>
				</tr>
									<tr>
					<td>fgdfgfdgdfgdfg 1</td>
					<td>fgdfgfdgdfgdfg 2</td>
					<td>fgdfgfdgdfgdfg 3</td>
					<td>fgdfgfdgdfgdfg 4</td>
					<td>fgdfgfdgdfgdfg 5</td>
					<td>fgdfgfdgdfgdfg 6</td>
				</tr>
									<tr>
					<td>fgdfgfdgdfgdfg 1</td>
					<td>fgdfgfdgdfgdfg 2</td>
					<td>fgdfgfdgdfgdfg 3</td>
					<td>fgdfgfdgdfgdfg 4</td>
					<td>fgdfgfdgdfgdfg 5</td>
					<td>fgdfgfdgdfgdfg 6</td>
				</tr>
									<tr>
					<td>fgdfgfdgdfgdfg 1</td>
					<td>fgdfgfdgdfgdfg 2</td>
					<td>fgdfgfdgdfgdfg 3</td>
					<td>fgdfgfdgdfgdfg 4</td>
					<td>fgdfgfdgdfgdfg 5</td>
					<td>fgdfgfdgdfgdfg 6</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div id="DivFooterRow" style="overflow:hidden"></div>
</div>
<script>
	window.onload = function(){
	MakeStaticHeader('tblgrid', 300, 400, 52, false);
	}
</script>