473,320 Members | 1,840 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 3024
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

19
by: Logix | last post by:
Hello! I'm trying to make a sort of online page building system. In order to do this, I represent my page using a HTML table. One of the most basic templates would be a page divided in six...
3
by: rufus | last post by:
I am created a table dynamically and I have wrapped it in a div tag so that the user can scroll the table horizontally ie I have added an overflow property to the div. I dont want the user to be...
11
by: Norman L. DeForest | last post by:
Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables...
2
by: Steve Bottoms | last post by:
Hi, all! Using VB as code-behind in asp.net page... I have a TABLE control which I'm building dynamically. After the table is built, I'm trying to retrieve the HEIGHT property of that table...
6
by: anirban.anirbanju | last post by:
hi there, i've some serious problem to add rows dynamically in a table. my table contains 5 cell. | check | from_value | to_value | color_text | color_value |...
2
by: James Black | last post by:
I am dynamically generating a table in IE to display some information. I will probably change it to divs later, but I just want to get it working properly first. In my div I have the following...
1
by: James Black | last post by:
I am dynamically generating a table in IE to display some information. I will probably change it to divs later, but I just want to get it working properly first. In my div I have the following...
11
by: bharathmngl | last post by:
now iam trying to add rows dynamically into the table when i click "ADD ROW" button. It should also have the option to delete the selected row. So Please help me to find code.... And also please...
3
by: chris f | last post by:
In my table (ASP.NET 2) that is dynamically generated I have a cell that initially will only display N rows of text and hide the rest. (This is so that the rows have a small height and I can...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

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.