Make content in <td> scroll

Lloyd Sheen

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

Mar 18 '08 #1

Subscribe Reply

3290

Mike

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:%2******** ********@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

Mar 18 '08 #2

Anthony Jones

"Lloyd Sheen" <a@b.cwrote in message
news:%2******** ********@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%

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

Mar 18 '08 #3

Lloyd Sheen

"Anthony Jones" <An*@yadayadaya da.comwrote in message
news:eo******** ******@TK2MSFTN GP04.phx.gbl...

"Lloyd Sheen" <a@b.cwrote in message
news:%2******** ********@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

Mar 18 '08 #4

=?Utf-8?B?YnJ1Y2UgYmFya2Vy?=

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" <An*@yadayadaya da.comwrote in message
news:eo******** ******@TK2MSFTN GP04.phx.gbl...
"Lloyd Sheen" <a@b.cwrote in message
news:%2******** ********@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

Mar 18 '08 #5

Lloyd Sheen

"bruce barker" <br*********@di scussions.micro soft.comwrote in message
news:26******** *************** ***********@mic rosoft.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" <An*@yadayadaya da.comwrote in message
news:eo******* *******@TK2MSFT NGP04.phx.gbl.. .
"Lloyd Sheen" <a@b.cwrote in message
news:%2******** ********@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

Mar 18 '08 #6

Anthony Jones

"bruce barker" <br*********@di scussions.micro soft.comwrote in message
news:26******** *************** ***********@mic rosoft.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

Mar 19 '08 #7

Anthony Jones

"Lloyd Sheen" <a@b.cwrote in message
news:uz******** ******@TK2MSFTN GP03.phx.gbl...

>
"Anthony Jones" <An*@yadayadaya da.comwrote in message
news:Os******** ******@TK2MSFTN GP03.phx.gbl...
"bruce barker" <br*********@di scussions.micro soft.comwrote in message
news:26******** *************** ***********@mic rosoft.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

Mar 19 '08 #8

Lloyd Sheen

"Anthony Jones" <An*@yadayadaya da.comwrote in message
news:OB******** ******@TK2MSFTN GP04.phx.gbl...

"Lloyd Sheen" <a@b.cwrote in message
news:uz******** ******@TK2MSFTN GP03.phx.gbl...
>>
"Anthony Jones" <An*@yadayadaya da.comwrote in message
news:Os******* *******@TK2MSFT NGP03.phx.gbl.. .
"bruce barker" <br*********@di scussions.micro soft.comwrote in message
news:26******** *************** ***********@mic rosoft.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

Mar 19 '08 #9

Peter May

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

Mar 20 '08 #10

Similar topics

689

How to move <PRE> definition inside <TD> ...< /TD> to a stylesheet ?

by: Matt Adams | last post by:

I want to move the following <PRE> defintion to a css file: <TABLE><TR><TD><PRE>sample text</PRE></TD> <TD> not predefined font</TD></TR></TABLE> should be <TABLE><TR><TD class=aaa>sample text</TD> <TD> not predefined font</TD></TR></TABLE>

HTML / CSS

21900

Can I position items inside a <td>?

by: Zenobia | last post by:

Hello folks, Is it possible to position an item within a <td> element? For instance see below. The table has multiple rows, one for each database record. Each row has 3 hrefs associated with it (for edit, delete and update). I want to position these 3 href items in the same columns, which would be posible if the span could be positioned -...

HTML / CSS

11196

retrieve clean text between <td></td>

by: js | last post by:

I have a table rendered with XSLT. The first column has a radio button controls for user to make a selection for a particular row. All the values in the remaining columns are all concated with a   (blank). I need to retieve the text in each cell of that row if the radio button on that row is clicked. Each <TD> has a numeric ID so that...

Javascript

5756

Problem with document.write("<td>Hello</td>")

by: bissatch | last post by:

Hi, I am trying to use JavaScript to write a table column on a web page. The code is as follows: <html> <head> <script> function displaycount() {

Javascript

116785

<td> with background image - what's the right way?

by: Derek Fountain | last post by:

I have a horizontal navigation bar, which is a single row table containing the right images. It "stretches" itself across the screen using a penultimate td like this: <td width="100%" background="images/nav_bar/nb_spacer.gif"> </td> which works in all major browsers that I've tried, but doesn't validate. No background attribute to...

HTML / CSS

1699

Why <intput> tag overwrite the <td> tag

by: RC | last post by:

I have a very sime html table like <html><head><title>My Table</title> <style> input { margin: 0; padding: 0; border-width: 0; text-indet: 0; text-align: left } </style></head><body> <table border="1" width="100%"> <caption>Table Title</caption> <tr>

.NET Framework

2930

how to perg_match between <tr>and </tr> or <td>ot</td> in php

by: mahesr | last post by:

I want to match some particular text between <tr>and </tr> or <td>and </td>.... in PHP. like below............ <table><tr> CATEGORY: <td><font face="Verdana" size="1" color="#A000A0"> Wedding Accessories

PHP

1713

Freezing <Td> and <TR>

by: jack | last post by:

Hi all im Creating a report in HTML with the help of dotnet.. im creating a which shows a data of 12 months .. the forst row of the column contains month names.. and the following data.. The table which contains a data is under div which has a scroll bar.. What in trying to do is freeze the first row of the table which is been generated.....

ASP.NET

2776

How can I get the information between the <tr><td> and </td></tr>?

by: Xiaoyan | last post by:

Hi,everyone: I have a problem now. I can't get the information between the <tr><td> and </td></tr>. for example: I use this regular expression can't get it, I don't know why. $test=~/<tr><td>(.*)<\/td><\/td>(.*)<\/td><\/tr>/ms; <tr><td>station</td> <td>station number/identification, see chart above: <br> B = GoMoos buoy B location<br> S...

Perl

7666

What is ONU?

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...

General

7584

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

8108

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

7644

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

7951

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

5484

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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...

Microsoft Access / VBA

5213

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

1201

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

925

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

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...

General