HTML表格固定列寬

Question

我有2列2行的html表。 我希望這些列保持固定。 例如

Row1Text下拉菜單
Row2Text文本框

相反，發生的事情是Dropwdown正在轉移。 例如，

Row1Text下拉菜單
Row2Text文本框

這是在IE 11和Chrome版本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

將您的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>

小提琴

Answer 2

我需要使用“ display：table-row”而不是“ display：block”。 這個問題在這篇文章中得到了回答：