Scrolling Table

Shawn B.

Greetings,

I am trying to create a table that has a scrolling body. The problem I'm
experiencing is that if the columns in the "body" part of the table exceed
the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px
solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto; BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0"
width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #1

Subscribe Post Reply

2594

Steve C. Orr [MVP, MCSD]

You should put the table inside a div with the "overflow" CSS attribute set:
http://www.w3schools.com/css/pr_pos_overflow.asp

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net
"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP10.phx.gbl...

Greetings,

I am trying to create a table that has a scrolling body. The problem I'm
experiencing is that if the columns in the "body" part of the table exceed
the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px
solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0"
width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #2

bruce barker

you have a couple options.

1) use client script to resize headings
2) use div's with overflow set in td's, so cell widths do not blow out.

-- bruce (sqlwork.com)
"Shawn B." <le****@html.com> wrote in message
news:#a**************@TK2MSFTNGP10.phx.gbl...

Greetings,

I am trying to create a table that has a scrolling body. The problem I'm
experiencing is that if the columns in the "body" part of the table exceed
the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px
solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0"
width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #3

Shawn B.

Yes, but then the header scrolls with the entire table. I want the header
to remain frozen on the screen while having the table "body" scrollable.
There are quite a few working examples (all of which I can find have to be
purchased).
Thanks,
Shawn

"Steve C. Orr [MVP, MCSD]" <St***@Orr.net> wrote in message
news:uH**************@TK2MSFTNGP09.phx.gbl...

You should put the table inside a div with the "overflow" CSS attribute set: http://www.w3schools.com/css/pr_pos_overflow.asp

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net
"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP10.phx.gbl...
Greetings,

I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px
solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto;

BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0"
width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase I am trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #4

Shawn B.

I have tried the resizing the header columns according to the width of the
columns of the "body" table but it doesn't work, If the width of the Cell in
the "body" is 100px and I assign the width of that header cell to 100px, the
cell in the body (where scrollbar is (remember, the scrollbar is not in the
header space)) will still be out of aligment... thus, place the following
code after then last div in the HTML I posted earlier:
<script>

FixColumnsWidths(tblContent, tblHeader);

function FixColumnsWidths(refContent, refHeader) {
var colLength = 0;
var col = 0;

var contentCell = null;
var headerCell = null;

if (refContent.rows.length == 0 && refHeader.rows.length == 0) {
alert('Rows dont match.');
return false;
}

if (refContent.rows[0].cells.length !=
refHeader.rows[0].cells.length) {
alert('Columns dont match.');
return false;
}

colLength = refContent.rows[0].cells.length;

for (col = 0; col<colLength; col++) {
contentCell = refContent.cells[col];
headerCell = refHeader.cells[col];

headerCell.width = contentCell.style.pixelWidth; // -
(refContent.cells[col].clientWidth -
refContent.cells[col].style.pixelWidth);

//alert('width: ' + refContent.cells[col].style.width + ',
clientWidth: ' + refContent.cells[col].clientWidth);
}

//alert(refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth -
refContent.cells[0].style.pixelWidth);
//alert('width: ' + refContent.cells[0].style.pixelWidth + ',
clientWidth: ' + refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth);

return true;
}

</script>

"bruce barker" <no***********@safeco.com> wrote in message
news:%2****************@TK2MSFTNGP11.phx.gbl...

you have a couple options.

1) use client script to resize headings
2) use div's with overflow set in td's, so cell widths do not blow out.

-- bruce (sqlwork.com)
"Shawn B." <le****@html.com> wrote in message
news:#a**************@TK2MSFTNGP10.phx.gbl...
Greetings,

I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px
solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto;

BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0"
width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase I am trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #5

Steve C. Orr [MVP, MCSD]

You need a separate table for the header then. Put that above (not in) your
scrolling div.

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net
"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...

Yes, but then the header scrolls with the entire table. I want the header
to remain frozen on the screen while having the table "body" scrollable.
There are quite a few working examples (all of which I can find have to be
purchased).
Thanks,
Shawn

"Steve C. Orr [MVP, MCSD]" <St***@Orr.net> wrote in message
news:uH**************@TK2MSFTNGP09.phx.gbl...
You should put the table inside a div with the "overflow" CSS attribute set:
http://www.w3schools.com/css/pr_pos_overflow.asp

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net
"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP10.phx.gbl...
Greetings,

I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto;

BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase
I am trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #6

DalePres

Try creating a table, put the header in a table within the first row, and
the div for the body table within the second row. That will lock down the
sizes. You'll get some red underlines in VS.Net about not being able to
nest a div within a td but it should work just the same.

Dale

"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP10.phx.gbl...

I have tried the resizing the header columns according to the width of the
columns of the "body" table but it doesn't work, If the width of the Cell in the "body" is 100px and I assign the width of that header cell to 100px, the cell in the body (where scrollbar is (remember, the scrollbar is not in the header space)) will still be out of aligment... thus, place the following
code after then last div in the HTML I posted earlier:
<script>

FixColumnsWidths(tblContent, tblHeader);

function FixColumnsWidths(refContent, refHeader) {
var colLength = 0;
var col = 0;

var contentCell = null;
var headerCell = null;

if (refContent.rows.length == 0 && refHeader.rows.length == 0) {
alert('Rows dont match.');
return false;
}

if (refContent.rows[0].cells.length !=
refHeader.rows[0].cells.length) {
alert('Columns dont match.');
return false;
}

colLength = refContent.rows[0].cells.length;

for (col = 0; col<colLength; col++) {
contentCell = refContent.cells[col];
headerCell = refHeader.cells[col];

headerCell.width = contentCell.style.pixelWidth; // -
(refContent.cells[col].clientWidth -
refContent.cells[col].style.pixelWidth);

//alert('width: ' + refContent.cells[col].style.width + ',
clientWidth: ' + refContent.cells[col].clientWidth);
}

//alert(refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth -
refContent.cells[0].style.pixelWidth);
//alert('width: ' + refContent.cells[0].style.pixelWidth + ',
clientWidth: ' + refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth);

return true;
}

</script>

"bruce barker" <no***********@safeco.com> wrote in message
news:%2****************@TK2MSFTNGP11.phx.gbl...
you have a couple options.

1) use client script to resize headings
2) use div's with overflow set in td's, so cell widths do not blow out.

-- bruce (sqlwork.com)
"Shawn B." <le****@html.com> wrote in message
news:#a**************@TK2MSFTNGP10.phx.gbl...
Greetings,

I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto; BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase
I am trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #7

Shawn B.

Did you look at the HTML I posted above? That is the exact thing that I did
and I'm still having the problem that I describe, whereas I see some other
people who have solved the problem and was hoping that someone in these
newsgroups would actually paste my source code into a page and look at what
I'm talking about.

Thanks for you help,
Shawn
"Steve C. Orr [MVP, MCSD]" <St***@Orr.net> wrote in message
news:e4**************@TK2MSFTNGP12.phx.gbl...

You need a separate table for the header then. Put that above (not in) your scrolling div.

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net
"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Yes, but then the header scrolls with the entire table. I want the header
to remain frozen on the screen while having the table "body" scrollable.
There are quite a few working examples (all of which I can find have to be purchased).
Thanks,
Shawn

"Steve C. Orr [MVP, MCSD]" <St***@Orr.net> wrote in message
news:uH**************@TK2MSFTNGP09.phx.gbl...
You should put the table inside a div with the "overflow" CSS attribute
set:
http://www.w3schools.com/css/pr_pos_overflow.asp

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net
"Shawn B." <le****@html.com> wrote in message
news:%2****************@TK2MSFTNGP10.phx.gbl...
> Greetings,
>
> I am trying to create a table that has a scrolling body. The
problem I'm
> experiencing is that if the columns in the "body" part of the table exceed
> the width of the "header" then they columns lose their alignment.

Can > anyone help me correct this?
>
>
>
>
>
> <div style="WIDTH:500px; HEIGHT:100px">
> <table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
> width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black

1px > solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid"> > <tr bgcolor="gainsboro">
> <td style="BORDER-RIGHT: black 1px solid">
> Column 1</td>
> <td style="BORDER-RIGHT: black 1px solid">
> Column 2</td>
> <td style="BORDER-RIGHT: black 1px solid">
> Column 3</td>
> <td>
> Column 4</td>
> </tr>
> </table>
> <div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto;
BORDER-LEFT:
> black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
> <table id="tblContent" border="0" cellpadding="0" cellspacing="0" > width="100%" bgcolor="white">
> <tbody>
> <tr>
> <td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
> solid">Data</td>
> <td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
> solid">Data</td>
> <td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
> solid">Data
> is specifically designed to wrap-around

becuase I
am
> trying to make a point.</td>
> <td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
> solid">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> <td style="BORDER-BOTTOM: black 1px solid"> face="Verdana" size="1">Data</td>
> </tr>
> <tr>
> <td>Data</td>
> <td>Data</td>
> <td>Data</td>
> <td>Data</td>
> </tr>
> </tbody>
> </table>
> </div>
> </div>
>
>

Nov 18 '05 #8

Scrolling Table

Similar topics