J
Joe Smith
Hi, I'm using the code below to change the contents of a cell table in IE.
The problem is that the cell size won't adjust to the size of the content,
as its positions have been declared 'absolute'. If I change that to
relative, the cell is sized to contain all the contents, and not just the
visible one.
Is there any solution to this? What I would like is, ideally, that the cell
size takes the largest width and height it is going to have, or if that's
not possible, the size of the current contents being shown.
Thanks!!
<code>
<html><head></head>
<body>
<script>
function show(name) {
document.all[name].style.visibility = 'visible';
}
function hide(name) {
document.all[name].style.visibility = 'hidden';
}
</script>
<form>
<input type=button onclick="hide('table2');show('table1');" value="Show 1">
<input type=button onclick="hide('table1');show('table2');" value="Show 2">
</form>
<table border=3>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>
AAAAAAAAA
</td>
<td>
<div id=option style='position:relative'>
<table border=1 id=table1 style='position:absolute; visibility:hidden'>
<tr><td>
BBBB<br>
CCCC<br>
DDDD<br>
</td>
</tr>
</table>
<div id=table2 style='position:absolute; visibility:hidden'>
lqdflkjqndflkn
</div>
</div>
</td>
</tr>
</table>
</body></html>
</code>
The problem is that the cell size won't adjust to the size of the content,
as its positions have been declared 'absolute'. If I change that to
relative, the cell is sized to contain all the contents, and not just the
visible one.
Is there any solution to this? What I would like is, ideally, that the cell
size takes the largest width and height it is going to have, or if that's
not possible, the size of the current contents being shown.
Thanks!!
<code>
<html><head></head>
<body>
<script>
function show(name) {
document.all[name].style.visibility = 'visible';
}
function hide(name) {
document.all[name].style.visibility = 'hidden';
}
</script>
<form>
<input type=button onclick="hide('table2');show('table1');" value="Show 1">
<input type=button onclick="hide('table1');show('table2');" value="Show 2">
</form>
<table border=3>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>
AAAAAAAAA
</td>
<td>
<div id=option style='position:relative'>
<table border=1 id=table1 style='position:absolute; visibility:hidden'>
<tr><td>
BBBB<br>
CCCC<br>
DDDD<br>
</td>
</tr>
</table>
<div id=table2 style='position:absolute; visibility:hidden'>
lqdflkjqndflkn
</div>
</div>
</td>
</tr>
</table>
</body></html>
</code>