473,898 Members | 2,759 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Scrolling Table

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:50 0px; 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="gainsb oro">
<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
7 2641
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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP10.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:50 0px; 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="gainsb oro">
<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
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.co m> wrote in message
news:#a******** ******@TK2MSFTN GP10.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:50 0px; 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="gainsb oro">
<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
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.ne t> wrote in message
news:uH******** ******@TK2MSFTN GP09.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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP10.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:50 0px; 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="gainsb oro">
<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
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>

FixColumnsWidth s(tblContent, tblHeader);

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

var contentCell = null;
var headerCell = null;

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

if (refContent.row s[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.cell s[col];
headerCell = refHeader.cells[col];

headerCell.widt h = contentCell.sty le.pixelWidth; // -
(refContent.cel ls[col].clientWidth -
refContent.cell s[col].style.pixelWid th);

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

//alert(refConten t.cells[0].clientWidth);
//alert(refConten t.cells[0].clientWidth -
refContent.cell s[0].style.pixelWid th);
//alert('width: ' + refContent.cell s[0].style.pixelWid th + ',
clientWidth: ' + refContent.cell s[0].clientWidth);
//alert(refConten t.cells[0].clientWidth);

return true;
}

</script>


"bruce barker" <no***********@ safeco.com> wrote in message
news:%2******** ********@TK2MSF TNGP11.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.co m> wrote in message
news:#a******** ******@TK2MSFTN GP10.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:50 0px; 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="gainsb oro">
<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
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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP09.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.ne t> wrote in message
news:uH******** ******@TK2MSFTN GP09.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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP10.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:50 0px; 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="gainsb oro">
<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
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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP10.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>

FixColumnsWidth s(tblContent, tblHeader);

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

var contentCell = null;
var headerCell = null;

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

if (refContent.row s[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.cell s[col];
headerCell = refHeader.cells[col];

headerCell.widt h = contentCell.sty le.pixelWidth; // -
(refContent.cel ls[col].clientWidth -
refContent.cell s[col].style.pixelWid th);

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

//alert(refConten t.cells[0].clientWidth);
//alert(refConten t.cells[0].clientWidth -
refContent.cell s[0].style.pixelWid th);
//alert('width: ' + refContent.cell s[0].style.pixelWid th + ',
clientWidth: ' + refContent.cell s[0].clientWidth);
//alert(refConten t.cells[0].clientWidth);

return true;
}

</script>


"bruce barker" <no***********@ safeco.com> wrote in message
news:%2******** ********@TK2MSF TNGP11.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.co m> wrote in message
news:#a******** ******@TK2MSFTN GP10.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:50 0px; 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="gainsb oro">
<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

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.ne t> wrote in message
news:e4******** ******@TK2MSFTN GP12.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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP09.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.ne t> wrote in message
news:uH******** ******@TK2MSFTN GP09.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.co m> wrote in message
news:%2******** ********@TK2MSF TNGP10.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:50 0px; 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="gainsb oro">
> <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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
6243
by: johkar | last post by:
I only have IE 6 and dial-up. Can you help me determine which browsers support this code? Thanks, John <html> <head> <title>Fixed Table Headers</title> <script language="JavaScript" type="text/javascript"> function fix(){
3
4589
by: SmartBloke | last post by:
What I want to be able to do is to present a table (with 3 varying width columns) as a scrolling list of items. I can do this by placing the table within a div which has overflow-y set to scroll - however when the table is scrolled the table header row scrolls out of view. Is there a way to format this so that the header is outside of the scrollable area but still aligns with the (varying width) columns which contain the table data ?...
44
919
by: Jim M | last post by:
I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to put either tag inside an HTML <TD> and have the same kind of scrolling effect. This would allow me to fill the screen and have the size of the scrolling box change on resize. Thanks in advance.
6
12162
by: GGerard | last post by:
Hello I have an Access 2000 form with the following properties: Record Source - Table1
6
1554
by: Jon Paal | last post by:
an excellent working solution for scrolling tables appears at this link http://www.litotes.demon.co.uk/example_scripts/tableScroll.html author has no contact page, but I have a question about the display of the table. the top left corner in the table grid is hidden from being displayed. I have tried to figure out where it is being hidden but can't find the code to allow it to be shown as part of the left frozen column. can anyone...
0
7783
by: tequilamala | last post by:
I have an Iframe in one of the pages i am developing... the iframe is suppose to scroll up and down and the links target the iframe. the problem is that the iframe scrolls side to side on internet explorer but not on firefox. I dont want it to scroll sideways. in index.htm the iframe is at the bottom of the code. index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">...
1
3092
by: asearle | last post by:
Dear all, I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed for the html examples that I found out there this seems to work perfectly. On the surface it also works perfectly in my xml / xsl implementation too (also based on html underneath). Indeed, using IE6*, you can take a look at a cut-down example by...
3
1499
by: orbitrobert | last post by:
hi there, i'm having a difficult time inserting a scrolling div into a table. i'm a graphic designer and want to use the scrolling div on the portfolio page of my site. i find that everything i've tried breaks up the table?! can anyone help! i'm starting to lose my marbles. the scrolling div needs to go into the large white area (to the right of the nav bar). here's the code.
7
2919
by: robert.waters | last post by:
I have an Access database frontend linked via ODBC to a large (gigabytes) mysql database. I need to view a large amount of data in a a textbox (variable up to 300K), but I receive a 'there isnt enough memory' error whenever I scroll past N number of bytes in a textbox that has been filled with a lot of data. I am not sure what N is, but for a large chunk of data it occurs at about the halfway scroll, and smaller chunks might not throw...
0
9993
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10857
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10481
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9658
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
8034
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6076
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4705
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4295
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3303
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.