javascript messes up table

[arbitter]

Hi there,

 

So I have this problem where I'm hiding a table row, and when I wish to display it, the table gets all messed up.

<table border='1'>
<tr>
	<td>Dag:</td>
	<td><select name='begindag'><?php for($i=1; $i<=31; $i+=1){echo "<option value='$i'>$i</option>";} ?> </select></td>
</tr>
<tr>
	<td>Maand:</td>
	<td><select name='beginmaand'><?php for($i=1; $i<=12;$i+=1){echo "<option value='$i'>$months[$i]</option>";} ?></select></td>
</tr>
<tr id='vraag'>
	<td colspan='2' onclick="hideShow('vraag');hideShow('datum2');hideShow('datum');" align='center' style='cursor:pointer'>Einddatum geven?</td>
</tr>
<tr id='datum' style='display:none;'>
	<td>Einddag:</td>
	<td><select name='einddag'><?php for($i=1; $i<=31; $i+=1){echo "<option value='$i'>$i</option>";} ?> </select></td>
</tr>
<tr id='datum2' style='display:none;'>
	<td>Eindmaand:</td>
	<td><select name='eindmaand'><?php for($i=1; $i<=12;$i+=1){echo "<option value='$i'>$months[$i]</option>";} ?></select></td>
</tr>
</table>

 

and the hideShow() is simply:

function hideShow(id)
{
var object = document.getElementById(id).style
if (object.display == "none")
{
	object.display = "block";
}
else
{
	object.display = "none";
}
}[code]

I've tried by giving my table an absoulte position, but it doesn't work, still messes it up... when showing the hidden rows, both <td>'s get shown in one column, causing the first two rows' first cell to expand.

[brianlange]

Use display: table-row instead of display: block.

 

Brian

[arbitter]

Oh my such a simple solution! And the absolute position isn't even needed!

 

Thanks a lot!