How do I make a table with header and first column fixed on scroll vertical and horizontal?

Question

I have a table and I need to make a fixed header and a fixed first column for this table. I'm searching any idea that can help me in this problem.

EDIT

Any ideas?

Answer 1

Original Post

 function reposHead(e) { var h = document.getElementById('headscroll'); h.scrollLeft = e.scrollLeft; var f = document.getElementById('divfrozen'); f.scrollTop = e.scrollTop; } function reposHorizontal(e) { var h = document.getElementById('headscroll'); var c = document.getElementById('contentscroll'); h.scrollLeft = e.scrollLeft; c.scrollLeft = e.scrollLeft; var sh = document.getElementById('hscrollpos'); sh.innerHTML = e.scrollLeft; var ch = document.getElementById('contentwidth'); var ic = document.getElementById('innercontent'); ch.innerHTML = ic.clientWidth; //c.scrollWidth; var ch2 = document.getElementById('contentheight'); ch2.innerHTML = ic.clientHeight; //c.scrollWidth; var sp = document.getElementById('scrollwidth'); sp.innerHTML = e.scrollWidth; } function reposVertical(e) { var h = document.getElementById('divfrozen'); var c = document.getElementById('contentscroll'); h.scrollTop = e.scrollTop; c.scrollTop = e.scrollTop; var sh = document.getElementById('vscrollpos'); sh.innerHTML = e.scrollTop; var ch = document.getElementById('contentheight'); ch.innerHTML = c.scrollHeight; var sp = document.getElementById('scrollheight'); sp.innerHTML = e.scrollHeight; } 

  table.main { width: 700px; height: 221px; table-layout: fixed; } table.root { table-layout: fixed; } table.content { table-layout: fixed; width: 1890px; } table.head { table-layout: fixed; width: 1890px; } table.frozen { table-layout: fixed; } td { line-height: 28px; } div.horizontal-scroll { width: 703px; height: 22px; overflow: hidden; overflow-x: scroll; border: solid 1px #666; } div.horizontal-scroll div { width: 2173px; height: 1px; } div.vertical-scroll { height: 227px; width: 22px; overflow: hidden; overflow-y: scroll; border: solid 1px #666; } div.vertical-scroll div { height: 377px; width: 1px; } td.inner { border-left: 1px solid #666; border-bottom: 1px solid #666; padding: 3px; height: 28px; } td.frozencol { border-right: 1px double #666; width: 200px; } td.col1 { border-left: none; width: 100px; } td.bottomcol { /*border-bottom: 1px solid #666;*/ } .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 { width: 200px; overflow: hidden; text-overflow: ellipses; white-space: nowrap; } td.head { /*border-bottom: 1px solid #666;*/ background-color: #efefef; border-top: 1px solid #666; } .rightcol { border-right: 1px solid #666; } .toprow { border-top: 0px; } div.root { margin-left: 0px; overflow: hidden; width: 200px; height: 28px; border-bottom: 1px solid #666; } div.frozen { overflow: hidden; width: 200px; /*border-bottom: 1px solid #666;*/ height: 200px; } div.divhead { overflow: hidden; height: 28px; width: 500px; border-left: 1px solid #666; border-right: 1px solid #666; /*border-bottom: 0px solid #666;*/ border-bottom: 1px solid #666; } div.content { overflow: hidden; width: 500px; height: 200px; border-left: 1px solid #666; border-right: 1px solid #666; /*border-bottom: 1px solid #666;*/ } td.tablefrozencolumn { width: 200px; border-right: 3px solid #666; } td.tablecontent { width: 501px; } td.tableverticalscroll { width: 24px; } div.ff-fill { height: 23px; width: 23px; background-color: #ccc; border-right: 1px solid #666; border-bottom: 1px solid #666; } 

 <form id="form1" runat="server"> <div> <table border="0" cellpadding="0" cellspacing="0" class='main'> <tr> <td class='tablefrozencolumn'> <div id='divroot' class='root'> <table border="0" cellpadding="0" cellspacing="0" width="100%" class='root'> <tr> <td class='inner frozencol colwidth head'> Head0 </td> </tr> </table> </div> <div id='divfrozen' class='frozen'> <table border="0" cellpadding="0" cellspacing="0" width="100%" class='frozen'> <tr> <td class='inner frozencol toprow'> Col0Row2 </td> </tr> <tr> <td class='inner frozencol'> Col0Row3 </td> </tr> <tr> <td class='inner frozencol'> Col0Row4 </td> </tr> <tr> <td class='inner frozencol'> Col0Row5 </td> </tr> <tr> <td class='inner frozencol'> Col0Row6 </td> </tr> <tr> <td class='inner frozencol'> Col0Row7 </td> </tr> <tr> <td class='inner frozencol'> Col0Row8 </td> </tr> <tr> <td class='inner frozencol'> Col0Row9 </td> </tr> <tr> <td class='inner frozencol'> Col0Row10 </td> </tr> <tr> <td class='inner frozencol bottomcol rightcol'> Col1Row11 </td> </tr> </table> </div> </td> <td class='tablecontent'> <div id='headscroll' class='divhead'> <table border="0" cellpadding="0" cellspacing="0" class='head'> <tr> <td class='inner col1 head'> Head 1 </td> <td class='inner col2 head'> Head 2 </td> <td class='inner col3 head'> Head 3 </td> <td class='inner col4 head'> Head 4 </td> <td class='inner col5 head'> Head 5 </td> <td class='inner col6 head'> Head 6 </td> <td class='inner col7 head'> Head 7 </td> <td class='inner col8 head'> Head 8 </td> <td class='inner col9 head'> Head 9 </td> <td class='inner col10 head rightcol'> Head 10 </td> </tr> </table> </div> <div id='contentscroll' class='content' onscroll='reposHead(this);'> <table border="0" cellpadding="0" cellspacing="0" class='content' id='innercontent'> <tr> <td class='inner col1 toprow'> Col1Row2 </td> <td class='inner col2'> Col2Row2 </td> <td class='inner col3'> Col3Row2 </td> <td class='inner col4'> Col4Row2 </td> <td class='inner col5'> Col5Row2 </td> <td class='inner col6'> Col6Row2 </td> <td class='inner col7'> Col7Row2 </td> <td class='inner col8'> Col8Row2 </td> <td class='inner col9'> Col9Row2 </td> <td class='inner col10 rightcol'> Col10Row2 </td> </tr> <tr> <td class='inner col1'> Col1Row3 </td> <td class='inner'> Col2Row3 </td> <td class='inner'> Col3Row3 </td> <td class='inner'> Col4Row3 </td> <td class='inner'> Col5Row3 </td> <td class='inner'> Col6Row3 </td> <td class='inner'> Col7Row3 </td> <td class='inner'> Col8Row3 </td> <td class='inner'> Col9Row3 </td> <td class='inner rightcol'> Col10Row3 </td> </tr> <tr> <td class='inner col1'> Col1Row4 </td> <td class='inner'> Col2Row4 </td> <td class='inner'> Col3Row4 </td> <td class='inner'> Col4Row4 </td> <td class='inner'> Col5Row4 </td> <td class='inner'> Col6Row4 </td> <td class='inner'> Col7Row4 </td> <td class='inner'> Col8Row4 </td> <td class='inner'> Col9Row4 </td> <td class='inner rightcol'> Col10Row4 </td> </tr> <tr> <td class='inner col1'> Col1Row5 </td> <td class='inner'> Col2Row5 </td> <td class='inner'> Col3Row5 </td> <td class='inner'> Col4Row5 </td> <td class='inner'> Col5Row5 </td> <td class='inner'> Col6Row5 </td> <td class='inner'> Col7Row5 </td> <td class='inner'> Col8Row5 </td> <td class='inner'> Col9Row5 </td> <td class='inner rightcol'> Col10Row5 </td> </tr> <tr> <td class='inner col1'> Col1Row6 </td> <td class='inner'> Col2Row6 </td> <td class='inner'> Col3Row6 </td> <td class='inner'> Col4Row6 </td> <td class='inner'> Col5Row6 </td> <td class='inner'> Col6Row6 </td> <td class='inner'> Col7Row6 </td> <td class='inner'> Col8Row6 </td> <td class='inner'> Col9Row6 </td> <td class='inner rightcol'> Col10Row6 </td> </tr> <tr> <td class='inner col1'> Col1Row7 </td> <td class='inner'> Col2Row7 </td> <td class='inner'> Col3Row7 </td> <td class='inner'> Col4Row7 </td> <td class='inner'> Col5Row7 </td> <td class='inner'> Col6Row7 </td> <td class='inner'> Col7Row7 </td> <td class='inner'> Col8Row7 </td> <td class='inner'> Col9Row7 </td> <td class='inner rightcol'> Col10Row7 </td> </tr> <tr> <td class='inner col1'> Col1Row8 </td> <td class='inner'> Col2Row8 </td> <td class='inner'> Col3Row8 </td> <td class='inner'> Col4Row8 </td> <td class='inner'> Col5Row8 </td> <td class='inner'> Col6Row8 </td> <td class='inner'> Col7Row8 </td> <td class='inner'> Col8Row8 </td> <td class='inner'> Col9Row8 </td> <td class='inner rightcol'> Col10Row8 </td> </tr> <tr> <td class='inner col1'> Col1Row9 </td> <td class='inner'> Col2Row9 </td> <td class='inner'> Col3Row9 </td> <td class='inner'> Col4Row9 </td> <td class='inner'> Col5Row9 </td> <td class='inner'> Col6Row9 </td> <td class='inner'> Col7Row9 </td> <td class='inner'> Col8Row9 </td> <td class='inner'> Col9Row9 </td> <td class='inner rightcol'> Col10Row9 </td> </tr> <tr> <td class='inner col1'> Col1Row10 </td> <td class='inner'> Col2Row10 </td> <td class='inner'> Col3Row10 </td> <td class='inner'> Col4Row10 </td> <td class='inner'> Col5Row10 </td> <td class='inner'> Col6Row10 </td> <td class='inner'> Col7Row10 </td> <td class='inner'> Col8Row10 </td> <td class='inner'> Col9Row10 </td> <td class='inner rightcol'> Col10Row10 </td> </tr> <tr> <td class='inner col1 bottomcol'> Col1Row11 </td> <td class='inner bottomcol'> Col2Row11 </td> <td class='inner bottomcol'> Col3Row11 </td> <td class='inner bottomcol'> Col4Row11 </td> <td class='inner bottomcol'> Col5Row11 </td> <td class='inner bottomcol'> Col6Row11 </td> <td class='inner bottomcol'> Col7Row11 </td> <td class='inner bottomcol'> Col8Row11 </td> <td class='inner bottomcol'> Col9Row11 </td> <td class='inner bottomcol rightcol'> Col10Row11 </td> </tr> </table> </div> </td> <td class='tableverticalscroll' rowspan="2"> <div class='vertical-scroll' onscroll='reposVertical(this);'> <div> </div> </div> <div class='ff-fill'> </div> </td> </tr> <tr> <td colspan="3"> <div class='horizontal-scroll' onscroll='reposHorizontal(this);'> <div> </div> </div> </td> </tr> </table> </div> </form>