Make content in <td> scroll

**Mike** · Mar 18 '08, 04:55 PM

Re: Make content in <td> scroll

add a div tag around the table?
something like

<div style="height:1 0px;width;100px ;">
--your html table
</div>

(something like that)

"Lloyd Sheen" <a@b.cwrote in message
news:%23CudVNRi IHA.2540@TK2MSF TNGP05.phx.gbl. ..

>I have now spent the entire morning on what I think should be easy. I
>cannot for the life of me figure out how to make a simple one row, two
>column table where is the contents of the one of the colums exceeds 100% of
>the height it should add a scroll bar to ensure that the table remains at
>100% of the browser screen and the contents do not scroll off the end of
>the page.
>
HELP please
>
Lloyd Sheen

**Anthony Jones** · Mar 18 '08, 05:05 PM

Re: Make content in <td> scroll

"Lloyd Sheen" <a@b.cwrote in message
news:%23CudVNRi IHA.2540@TK2MSF TNGP05.phx.gbl. ..

I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100%

of

the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of

the

page.
>

The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100 %; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.

--
Anthony Jones - MVP ASP/ASP.NET

**Lloyd Sheen** · Mar 18 '08, 05:15 PM

Re: Make content in <td> scroll

"Anthony Jones" <Ant@yadayadaya da.comwrote in message
news:eoWHhhRiIH A.4396@TK2MSFTN GP04.phx.gbl...

"Lloyd Sheen" <a@b.cwrote in message
news:%23CudVNRi IHA.2540@TK2MSF TNGP05.phx.gbl. ..

>I have now spent the entire morning on what I think should be easy. I
>cannot for the life of me figure out how to make a simple one row, two
>column table where is the contents of the one of the colums exceeds 100%

of

>the height it should add a scroll bar to ensure that the table remains at
>100% of the browser screen and the contents do not scroll off the end of

the

>page.
>>

>
The clue is that a TD does not honor the overflow style attribute.
>
Try placing a DIV with the style attributes "height:100 %; overflow-y:auto"
inside the TD.
>
What DTD does the page use? The meaning of height differs between modes.
>
>
>
--
Anthony Jones - MVP ASP/ASP.NET
>
>

The DTD is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

In Mike's post he used a px height and that works. If I use a % height it
does not work.

Thanks,
LS

**=?Utf-8?B?YnJ1Y2UgYmFya2Vy?=** · Mar 18 '08, 05:35 PM

Re: Make content in <td> scroll

if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>
<body>
<table style="height:1 00%;width:100%; ">
<tr>
<td style="backgrou nd-color:red"</td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high. this
is because in the w3c standard there is no default height to a body, so the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.

-- bruce (sqlwork.com)

"Lloyd Sheen" wrote:

>
"Anthony Jones" <Ant@yadayadaya da.comwrote in message
news:eoWHhhRiIH A.4396@TK2MSFTN GP04.phx.gbl...

"Lloyd Sheen" <a@b.cwrote in message
news:%23CudVNRi IHA.2540@TK2MSF TNGP05.phx.gbl. ..

I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100%

of

the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of

the

page.
>

The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100 %; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.

--
Anthony Jones - MVP ASP/ASP.NET

>
The DTD is :
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>
In Mike's post he used a px height and that works. If I use a % height it
does not work.
>
Thanks,
LS
>
>

**Lloyd Sheen** · Mar 18 '08, 06:35 PM

Re: Make content in <td> scroll

"bruce barker" <brucebarker@di scussions.micro soft.comwrote in message
news:264E6BC7-E36E-44C7-ABA4-5E6BDAB67461@mi crosoft.com...

if you use xhtml or html 4.0 doctypes then:
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>
<body>
<table style="height:1 00%;width:100%; ">
<tr>
<td style="backgrou nd-color:red"</td>
</tr>
</table>
</body>
</html>
>
then the td will be the width of the page, but only 1 line space high.
this
is because in the w3c standard there is no default height to a body, so
the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.
>
>
-- bruce (sqlwork.com)
>
>
"Lloyd Sheen" wrote:
>

>>
>"Anthony Jones" <Ant@yadayadaya da.comwrote in message
>news:eoWHhhRiI HA.4396@TK2MSFT NGP04.phx.gbl.. .

"Lloyd Sheen" <a@b.cwrote in message
news:%23CudVNRi IHA.2540@TK2MSF TNGP05.phx.gbl. ..
>I have now spent the entire morning on what I think should be easy. I
>cannot for the life of me figure out how to make a simple one row, two
>column table where is the contents of the one of the colums exceeds
>100%
of
>the height it should add a scroll bar to ensure that the table remains
>at
>100% of the browser screen and the contents do not scroll off the end
>of
the
>page.
>>
>
The clue is that a TD does not honor the overflow style attribute.
>
Try placing a DIV with the style attributes "height:100 %;
overflow-y:auto"
inside the TD.
>
What DTD does the page use? The meaning of height differs between
modes.
>
>
>
--
Anthony Jones - MVP ASP/ASP.NET
>
>

>>
>The DTD is :
>>
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>>
>In Mike's post he used a px height and that works. If I use a % height
>it
>does not work.
>>
>Thanks,
>LS
>>
>>

I suppose that is the same for the width??

Thanks
LS

**Anthony Jones** · Mar 19 '08, 07:55 AM

Re: Make content in <td> scroll

"bruce barker" <brucebarker@di scussions.micro soft.comwrote in message
news:264E6BC7-E36E-44C7-ABA4-5E6BDAB67461@mi crosoft.com...

if you use xhtml or html 4.0 doctypes then:
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>
<body>
<table style="height:1 00%;width:100%; ">
<tr>
<td style="backgrou nd-color:red"</td>
</tr>
</table>
</body>
</html>
>
then the td will be the width of the page, but only 1 line space high.

this

is because in the w3c standard there is no default height to a body, so

the

heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.
>
>

Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html style="height:1 00%; overflow:hidden ">
<body style="height:1 00%; overflow:hidden ; margin:0px" scroll="no">
<div style="height:1 00%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br />
</div>
<div style="height:1 00%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br />
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give it the
height of the viewport. From there child elements with 100% will take the
height of the parent element.

The table approach however fails in FF. The above works in IE and FF.

--
Anthony Jones - MVP ASP/ASP.NET

**Anthony Jones** · Mar 19 '08, 04:35 PM

Re: Make content in <td> scroll

"Lloyd Sheen" <a@b.cwrote in message
news:uzF6$QciIH A.3740@TK2MSFTN GP03.phx.gbl...

>
"Anthony Jones" <Ant@yadayadaya da.comwrote in message
news:Ostv4WZiIH A.4344@TK2MSFTN GP03.phx.gbl...

"bruce barker" <brucebarker@di scussions.micro soft.comwrote in message
news:264E6BC7-E36E-44C7-ABA4-5E6BDAB67461@mi crosoft.com...

if you use xhtml or html 4.0 doctypes then:
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>
<body>
<table style="height:1 00%;width:100%; ">
<tr>
<td style="backgrou nd-color:red"</td>
</tr>
</table>
</body>
</html>
>
then the td will be the width of the page, but only 1 line space high.

this

is because in the w3c standard there is no default height to a body, so

the

heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.
>
>

Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html style="height:1 00%; overflow:hidden ">
<body style="height:1 00%; overflow:hidden ; margin:0px" scroll="no">
<div style="height:1 00%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br />
</div>
<div style="height:1 00%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br />
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give it
the
height of the viewport. From there child elements with 100% will take

the

height of the parent element.

The table approach however fails in FF. The above works in IE and FF.

--
Anthony Jones - MVP ASP/ASP.NET

>
>
Got it to work with table and a Panel (div). I also added code to handle
resizing the window. The code for each is below. Thanks to all that
helped.
>
One last question. In googling around for the resize I notice that for

both

IE and Mozilla the onresize event is not part of the standard. With the
arrival of IE 8 and its "compliance " with standards does this mean it will
stop working?
>

That's a really good question. However I can't see MS disabling things
because there not defined by a standard. They are aiming to make sure that
where there is a standard they comply with it. If your target is IE only
then I doubt you need to worry. If you want this stuff to work on FF as
well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
3. They resize quite happily without any code intervention.

--
Anthony Jones - MVP ASP/ASP.NET

**Lloyd Sheen** · Mar 19 '08, 05:25 PM

Re: Make content in <td> scroll

"Anthony Jones" <Ant@yadayadaya da.comwrote in message
news:OBhCi3diIH A.4712@TK2MSFTN GP04.phx.gbl...

"Lloyd Sheen" <a@b.cwrote in message
news:uzF6$QciIH A.3740@TK2MSFTN GP03.phx.gbl...

>>
>"Anthony Jones" <Ant@yadayadaya da.comwrote in message
>news:Ostv4WZiI HA.4344@TK2MSFT NGP03.phx.gbl.. .

"bruce barker" <brucebarker@di scussions.micro soft.comwrote in message
news:264E6BC7-E36E-44C7-ABA4-5E6BDAB67461@mi crosoft.com...
>if you use xhtml or html 4.0 doctypes then:
>>
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
><html>
><body>
><table style="height:1 00%;width:100%; ">
> <tr>
> <td style="backgrou nd-color:red"</td>
> </tr>
></table>
></body>
></html>
>>
>then the td will be the width of the page, but only 1 line space high.
this
>is because in the w3c standard there is no default height to a body,
>so
the
>heigth:100% is ignored. you must specify an absolute height, or use
>javascript to set the height to the viewport size.
>>
>>
>
>
Try this:-
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html style="height:1 00%; overflow:hidden ">
<body style="height:1 00%; overflow:hidden ; margin:0px" scroll="no">
<div style="height:1 00%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br />
</div>
<div style="height:1 00%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br />
</div>
</body>
</html>
>
The key thing is to give the html element 100% height which will give
it
the
height of the viewport. From there child elements with 100% will take

the

height of the parent element.
>
The table approach however fails in FF. The above works in IE and FF.
>
>
--
Anthony Jones - MVP ASP/ASP.NET
>
>

>>
>>
>Got it to work with table and a Panel (div). I also added code to handle
>resizing the window. The code for each is below. Thanks to all that
>helped.
>>
>One last question. In googling around for the resize I notice that for

both

>IE and Mozilla the onresize event is not part of the standard. With the
>arrival of IE 8 and its "compliance " with standards does this mean it
>will
>stop working?
>>

>
That's a really good question. However I can't see MS disabling things
because there not defined by a standard. They are aiming to make sure
that
where there is a standard they comply with it. If your target is IE only
then I doubt you need to worry. If you want this stuff to work on FF as
well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
3. They resize quite happily without any code intervention.
>
>
--
Anthony Jones - MVP ASP/ASP.NET
>
>

Thanks for all your help

**Peter May** · Mar 20 '08, 08:55 AM

Re: Make content in <td> scroll

Lloyd Sheen pisze:
[...]

The DTD is :
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

If You don't serve your xhtml as application/xhtml+xml then You don't
need xhtml. Just use simple HTML, for example Strict version. See
http://www.w3.org/MarkUp/2004/xhtml-faq

--
Peter

Make content in <td> scroll

Make content in <td> scroll

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment