Html表固定列寬

Question

我有一個2列和2行的html表。我希望列保持固定。因此，例如，

Row1Text下拉
Row2Text文本框

而是正在發生的事情是Dropwdown正在轉移過來。例如，

  Row1Text                                                                                                                  下拉
Row2Text文本框

這在IE 11和鉻版35.0.1916.153發生。但是，它在IE9中正常工作。

這裏是我使用的代碼：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

我需要使用'display：table-row'而不是'display：block'。這個問題在這裏回答：post：

Answer 2

改變你的HTML結構遵循：

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> 

你必須將你的select內<th>

fiddle