How to create a table with fixed columns and headers






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;
}

<!--[if LT IE 7]>

div.ff-fill
{
height: 10px;
width:20px;
}
td.tablecontent
{
width: 500px;
}
div.horizontal-scroll
{
width:700px;
height:20px;
}
div.horizontal-scroll div
{
width: 2100px;
}
div.vertical-scroll
{
height:228px;
width:20px;
}
div.vertical-scroll div
{
height:306px;
}
td.tableverticalscroll
{
width:22px;
}

<![endif]-->




















Head0



































Col0Row2

Col0Row3

Col0Row4

Col0Row5

Col0Row6

Col0Row7

Col0Row8

Col0Row9

Col0Row10

Col1Row11


















Head 1

Head 2

Head 3

Head 4

Head 5

Head 6

Head 7

Head 8

Head 9

Head 10





























































































































Col1Row2

Col2Row2

Col3Row2

Col4Row2

Col5Row2

Col6Row2

Col7Row2

Col8Row2

Col9Row2

Col10Row2

Col1Row3

Col2Row3

Col3Row3

Col4Row3

Col5Row3

Col6Row3

Col7Row3

Col8Row3

Col9Row3

Col10Row3

Col1Row4

Col2Row4

Col3Row4

Col4Row4

Col5Row4

Col6Row4

Col7Row4

Col8Row4

Col9Row4

Col10Row4

Col1Row5

Col2Row5

Col3Row5

Col4Row5

Col5Row5

Col6Row5

Col7Row5

Col8Row5

Col9Row5

Col10Row5

Col1Row6

Col2Row6

Col3Row6

Col4Row6

Col5Row6

Col6Row6

Col7Row6

Col8Row6

Col9Row6

Col10Row6

Col1Row7

Col2Row7

Col3Row7

Col4Row7

Col5Row7

Col6Row7

Col7Row7

Col8Row7

Col9Row7

Col10Row7

Col1Row8

Col2Row8

Col3Row8

Col4Row8

Col5Row8

Col6Row8

Col7Row8

Col8Row8

Col9Row8

Col10Row8

Col1Row9

Col2Row9

Col3Row9

Col4Row9

Col5Row9

Col6Row9

Col7Row9

Col8Row9

Col9Row9

Col10Row9

Col1Row10

Col2Row10

Col3Row10

Col4Row10

Col5Row10

Col6Row10

Col7Row10

Col8Row10

Col9Row10

Col10Row10

Col1Row11

Col2Row11

Col3Row11

Col4Row11

Col5Row11

Col6Row11

Col7Row11

Col8Row11

Col9Row11

Col10Row11


















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;

}






Horizonal scroll pos:0px

Vertical scroll pos:0px

Height of inner content elt:0px

Width of inner content elt:0px

Height of scroll elt:0px

Width of scroll elt:0px




About Vineet Verma

Developer/Blogger/Gamer/Lazy Couch Potato...:P Need PDF Books: Knowledge Base
This entry was posted in HTML. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s