Entry
How do I change the height/width of a TABLE row?
Jan 10th, 2004 09:32
varun chopra, Martin Honnen,
Note Added by Varun - Following code to change the height of table row
will work only when no height is defined for <td> inside the row.
Otherwise it is great.
####################
IE4+ and NN6 only:
You get a referenc to the TABLE row e.g.
var row = document.all ?
document.all['rowID'] :
document.getElementById ?
document.getElementById('rowID') : null;
or often just in an event handler
<TR ONCLICK="var row = this; ..."
and then you can set either the HTML height/width attributes e.g.
row.width = 100;
row.height = 50;
or the style attributes e.g.
row.style.width = '100px';
row.style.height = '50px';
To reset to automatic row sizing you set
row.width = '';
row.height = '';
respectively
row.style.width = 'auto'
row.style.height = 'auto';
Here is an example that onclick of a row increases its height to
highlight it:
<HTML>
<HEAD>
<SCRIPT>
var currentRow;
function highlightRow (row) {
if (currentRow)
currentRow.height = '';
currentRow = row;
currentRow.height = document.all ? currentRow.offsetHeight + 15 : 55;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE ID="tableID" BORDER="1">
<TR ONCLICK="highlightRow(this)">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
<TR ONCLICK="highlightRow(this)">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
<TR ONCLICK="highlightRow(this)">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
<TR ONCLICK="highlightRow(this)">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
<TR ONCLICK="highlightRow(this)">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
