By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,077 Members | 1,309 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,077 IT Pros & Developers. It's quick & easy.

Scrolling Table

P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>
Nov 18 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #2

P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>

Nov 18 '05 #3

P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase I am trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>


Nov 18 '05 #4

P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase I am trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>


Nov 18 '05 #5

P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase
I am trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>



Nov 18 '05 #6

P: n/a
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">
<font face="Verdana" size="1">Column 1</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 2</font></td>
<td style="BORDER-RIGHT: black 1px solid">
<font face="Verdana" size="1">Column 3</font></td>
<td>
<font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data
is specifically designed to wrap-around becuase
I am trying to make a point.</font></td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid"><font face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
<td style="BORDER-BOTTOM: black 1px solid"><font
face="Verdana" size="1">Data</font></td>
</tr>
<tr>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
<td><font face="Verdana" size="1">Data</font></td>
</tr>
</tbody>
</table>
</div>
</div>



Nov 18 '05 #7

P: n/a

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">
> <font face="Verdana" size="1">Column 1</font></td>
> <td style="BORDER-RIGHT: black 1px solid">
> <font face="Verdana" size="1">Column 2</font></td>
> <td style="BORDER-RIGHT: black 1px solid">
> <font face="Verdana" size="1">Column 3</font></td>
> <td>
> <font face="Verdana" size="1">Column 4</font></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"><font face="Verdana" size="1">Data</font></td>
> <td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
> solid"><font face="Verdana" size="1">Data</font></td>
> <td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
> solid"><font face="Verdana" size="1">Data
> is specifically designed to wrap-around

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



Nov 18 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.