Html table fixed column width - html

Question

I have an html table with 2 columns and 2 rows. I want the columns to stay fixed. So for example,
Row1Text Dropdown
Row2Text Textbox
Instead what is happening is the Dropwdown is shifting over. For example,
Row1Text Dropdown
Row2Text Textbox
This is happening in IE 11 and Chrome Version 35.0.1916.153. However, it works fine in IE9.
Here is the code I am using: http://jsfiddle.net/RnSXA/
.Text {
width:600px;
}
function DropdownChange(value) {
if (value == "2") {
document.getElementById("Row2").style.display = "block";
}
else {
document.getElementById("Row2").style.display = "none";
}
}
<table style="width:100%;">
<tr>
<th align="left" style="width: 15%">
Row1:
</th>
<td style="width: 85%">
<select onchange="DropdownChange(this.value)">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr id="Row2" style="display:none;">
<th align="left" style="width: 15%">
Row2:
</th>
<td style="width: 85%">
<input type="text" class="Text"/>
</td>
</tr>
</table>

Answer 1

I needed to use 'display:table-row' instead of 'display:block'. This question is answered in this post:

Answer 2

Change your html structure to follow:
html
<table style="width:100%;">
<tr>
<th align="left" style="width: 15%">
Row1:
<select onchange="DropdownChange(this.value)">
<option value="1">1</option>
<option value="2">2</option>
</select>
</th>
<td style="width: 85%"></td>
</tr>
<tr id="Row2" style="display:none;">
<th align="left" style="width: 15%">
Row2:
</th>
<td style="width: 85%">
<input type="text" class="Text"/>
</td>
</tr>
</table>
You have to move your select inside <th>
fiddle