<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
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;
}
</style>
<!--[if LT IE 7]>
<style type="text/css">
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;
}
</style>
<![endif]-->
</head>
<body>
<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>
<script language='javascript' type='text/javascript'>
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;
}
</script>
<br />
<br />
Horizonal scroll pos:<span id='hscrollpos'>0</span>px<br />
Vertical scroll pos:<span id='vscrollpos'>0</span>px<br />
Height of inner content elt:<span id='contentheight'>0</span>px<br />
Width of inner content elt:<span id='contentwidth'>0</span>px<br />
Height of scroll elt:<span id='scrollheight'>0</span>px<br />
Width of scroll elt:<span id='scrollwidth'>0</span>px<br />
</form>
</body>
</html>
Thursday, March 19, 2015
How to create a table with fixed columns and headers
Subscribe to:
Posts (Atom)