I've setup a small script so that when the user selects a certain value from a select menu, another row in a table is displayed with some data.

<form>
<table>
<tr>
<td>Form</td>
<td>
<select onchange="if (this.value == 'ValueHere') {
document.getElementById('IDofRow').style.display = 'block';
}
else {
document.getElementById('IDofRow').style.display = 'none';
}">
<option selected>Option 1</option>
<option value="ValueHere">Option 2</option>
<option value="AnotherValue">Option 3</option>
</select>
</td>
</tr>
<tr id="IDofRow" style="display:none;">
<td>Look at this</td>
<td>Test</td>
</tr>
</table>
</form>

The problem is that the positioning and width of the hidden <tr> and <td> is wrong for some reason. Please copy this code and try it out yourself to see what I mean.

I can't quite work out why it is doing this.

Any help is appreciated

Your code is causing the table row to display as a block element instead of a row; instead of display = 'block' it should be display = 'table-row', but of course ie doesn't support this.
So instead since this IS a table row you can just use display = '' to reset it to its default display mode.

Worked a treat, thanks