PDA

View Full Version : how to calculate the height of a table based on the row height



marvapalli
Mar 13th, 2007, 12:44 AM
I have a table embedded inside a div tag. I need to calculate the height of the table. The height should be calculated based on the row heights. Aim is not to show the vertical scroll bar. The height of the row is in the css style. Here is the code:
<div id='div-container' class='divClass1' style="width: 100%">
<TABLE id='tblList' width='100%' cellspacing="0" cellpadding="1" align="center" >
<TR class='header'>
<th align = "left" style='position:static; width:100px' nowrap>
Name
</th>
<th align = "left" style='position:static; width:80px' nowrap>
Description
</th>
</TR>
<TR class="rowseparator">
<TD colspan='2'></TD>
</TR>
<TR class='tblrow' id='row0'>
<TD nowrap >
ABC
</TD>
<TD nowrap >
Test Desc
</TD>
</TR>
<TR class="rowseparator">
<TD colspan='2'></TD>
</TR>
<TR class="tblrow2">
<TD colspan='2'></TD>
</TR>
<TR class="rowseparator">
<TD colspan='2'></TD>
</TR>
</TABLE>
</DIV>

Here are the styles:
.rowseparator
{
background: #cccccc;
height: 1px;
}
.header
{
background: #BFC5E7;
height: 22px;
}
.tblrow
{
background: #eff3ff;
height: 20px;
}
.tblrow2
{
background: #ffffff;
height: auto;
}

The calculated height for the above table should be 22 (for header) + 1(row separator) + 20 (row) + 1(row separator) + auto(row) + 1(row separator) = 45 + auto

How can I achieve this using Javascript?

Thanks for your help

brandonH
Mar 13th, 2007, 03:28 AM
ok, lemme see if i understand what you want.

you want to detect the height of the table depending on how many rows are in it? if so there is no need to calculate it by measuring all the rows.

you can just get the height of the table like so:

document.getElementById('tblList').offsetHeight

marvapalli
Mar 13th, 2007, 06:06 PM
I need to set the div height to a value such that there is no scroll bar displayed and there is no extra space after all the rows of the table. I think this value can be obtained by adding all the row heights. I am not sure how to get the row heights. Data in the table is dynamic.

document.getElementById('tblList').offsetHeight is coming as 0.

brandonH
Mar 20th, 2007, 05:50 AM
hrmm, i get a value for the height everytime i use that. even if i dynamically change the contents of the table.