469,571 Members | 1,249 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,571 developers. It's quick & easy.

Table height dynamically

Hi all,

I am struggling with a problem for a long time.

Problem statement:

I have a table and the table can contain n number of rows. i.e., the
table rows will be generataed out of a xml using a xslt. Now the problem
is I want the table to be only with a height of 200px. if this exceeds
beyond 200px, a vertical scroll bar along should appear. The horizontal
scroll bar should not appear.

I tried to used a javascript which will take the tbody and get the
height of the table row dynamically but the table row height is returned
by the javascript only if it is specified explicity else it returns
null. Further if I specify a value (say 50 px) and if the content in a
particular cell of that row is quite huge, naturally the cell height
become more but when accessed thru javascript its just returns the
height 50 px and not the height after which it is rendered.

Any help to solve this problem is greatly appreciated.

Thanks,
-Just dummy.

*** Sent via Developersdex http://www.developersdex.com ***
Aug 19 '05 #1
7 2794
Just Dummy wrote:
Hi all,

I am struggling with a problem for a long time.

Problem statement:

I have a table and the table can contain n number of rows. i.e., the
table rows will be generataed out of a xml using a xslt. Now the problem
is I want the table to be only with a height of 200px. if this exceeds
beyond 200px, a vertical scroll bar along should appear. The horizontal
scroll bar should not appear.

I tried to used a javascript which will take the tbody and get the
height of the table row dynamically but the table row height is returned
by the javascript only if it is specified explicity else it returns
null. Further if I specify a value (say 50 px) and if the content in a
particular cell of that row is quite huge, naturally the cell height
become more but when accessed thru javascript its just returns the
height 50 px and not the height after which it is rendered.

Any help to solve this problem is greatly appreciated.

Why not insert the table into a div with height of 200px, set overflow
to auto or scroll.
Mick
Aug 19 '05 #2
I can't use a div tag as the target browser is Firefox which doesn't
recognize the div tags.

*** Sent via Developersdex http://www.developersdex.com ***
Aug 19 '05 #3
ASM
Just Dummy wrote:
I can't use a div tag as the target browser is Firefox which doesn't
recognize the div tags.


can you repeat ? please
<div style="height: 200px; overflow: auto">
<table id="myTabl" ...>
<tr><td> ...
</table>
</div>

works fine with my FF (and even partialy with my IE)

--
Stephane Moriaux et son [moins] vieux Mac
Aug 19 '05 #4
Just Dummy wrote:
I can't use a div tag as the target browser is Firefox which doesn't
recognize the div tags.

Nonsense.
<div style="height:200px; overflow:scroll">
<table id="standings">
.....
</table>
</div>

Mick
Aug 19 '05 #5
I tried to put the table in div. Though I am able to see the scroll bar
but it doesn't satisfy the requirements. The reasong being
1) I don't want horizontal scroll bars. Is there a way to supress the
horizontal scroll bar along with vertical scroll bars peeing up when the
content exceeds the height of 200 px.
2) when <div style="height:200px; overflow:scroll">
tag is applied around the <table> tag the vertical and horizontal
scroll bars appear to the full width of the page, though the table's
width is just half of the screen width.
3) Further if there are very few rows in the table, even then the scroll
bars appear.

Here is the code of the page.
<html><head><title>Table Test</title>
<style type="text/css">
body { font-family: arial;}
table { border-color: darkblue; border-style: solid; border-width: 1px;
}
td, th {
font-family: Arial; font-size: 10pt; background-color: grey;
padding: 2px; padding-left: 6px; padding-right: 6px;
}
section-header{
background-color: darkblue; font-size : 18px; font-weight: bold;
font-style: normal; text-align: left; padding-left: 5px; vertical-align:
middle;
}
</style>
</head>
<body>
<div style="height:200px; overflow:scroll">
<table cellpadding="0" cellspacing="1" width="800px">
<thead>
<tr style="background-color:#008000;color:#ffffff;">
<th class="section-header">Name</th>
<th class="section-header">Position</th>
<th class="section-header">Number Added</th>
<th class="section-header">Number Removed</th>
</thead>
<tbody>
<tr><td>AAA</td><td>Left</td><td>122-456-789</td><td>122-456-788</td></t
r>
<tr><td>BBB</td><td>Left</td><td>123-456-789</td><td>123-456-788</td></t
r>
<tr><td>CCC</td><td>Right</td><td>233-456-789</td><td>233-456-788</td></
tr>
<tr><td>DDD</td><td>Left</td><td>234-456-789</td><td>234-456-788</td></t
r>
<tr><td>EEE</td><td>Right</td><td>238-456-789</td><td>238-456-788</td></
tr>
<tr><td>FFF</td><td>Right</td><td>235-456-789</td><td>235-456-788</td></
tr>
<tr><td>GGG</td><td>Left</td><td>236-456-789</td><td>236-456-788</td></t
r>
<tr><td>AAA</td><td>Left</td><td>122-456-789</td><td>122-456-788</td></t
r>
<tr><td>BBB</td><td>Left</td><td>123-456-789</td><td>123-456-788</td></t
r><tr>
<td>CCC</td><td>Right</td><td>233-456-789</td><td>233-456-788</td></tr>
<tr><td>DDD</td><td>Left</td><td>234-456-789</td><td>234-456-788</td></t
r>
<tr><td>EEE</td><td>Right</td><td>238-456-789</td><td>238-456-788</td></
tr>
<tr><td>FFF</td><td>Right</td><td>235-456-789</td><td>235-456-788</td></
tr>
<tr><td>GGG</td><td>Left</td><td>236-456-789</td><td>236-456-788</td></t
r>
</tbody>
</table>
</div>
</body>
</html>

Can sombody able to help me in this?

*** Sent via Developersdex http://www.developersdex.com ***
Aug 25 '05 #6
Just Dummy wrote:
I tried to put the table in div. Though I am able to see the scroll bar
but it doesn't satisfy the requirements. The reasong being
1) I don't want horizontal scroll bars. Is there a way to supress the
horizontal scroll bar along with vertical scroll bars peeing up when the
content exceeds the height of 200 px.
2) when <div style="height:200px; overflow:scroll">
tag is applied around the <table> tag the vertical and horizontal
scroll bars appear to the full width of the page, though the table's
width is just half of the screen width.
3) Further if there are very few rows in the table, even then the scroll
bars appear.

[...]

This has nothing to do with JavaScript, post to either:

comp.infosystems.www.authoring.html

or

comp.infosystems.www.authoring.css
That doesn't preclude someone from here helping anyway...

--
Rob
Aug 26 '05 #7
ASM
Just Dummy wrote:
I tried to put the table in div. Though I am able to see the scroll bar
but it doesn't satisfy the requirements. The reasong being
1) I don't want horizontal scroll bars. Is there a way to supress the
horizontal scroll bar along with vertical scroll bars peeing up when the
content exceeds the height of 200 px.


Use : <div style="overflow: auto">
then scrollbars will appear only if needed.
And if you display inside overflowed div
- something with width smaller than div's one -> no horizontal lift
- something with height smaller than div's one -> no vertical lift
<div style="position: relative; width: 800px; margin: auto;
height: 200px; text-align: senter; overflow: scroll">
<table cellpadding="0" cellspacing="1" width="760px">
And ... tell me : it wasn't javascript question, no ?

--
Stephane Moriaux et son [moins] vieux Mac
Aug 26 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

19 posts views Thread by Logix | last post: by
11 posts views Thread by Norman L. DeForest | last post: by
2 posts views Thread by Steve Bottoms | last post: by
1 post views Thread by James Black | last post: by
3 posts views Thread by chris f | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.