Question

我有一个包含2列和2行的html表。我希望列保持不变。例如，

Row1Text下拉列表
Row2Text文本框

相反，正在发生的事情是Dropwdown正在转变。例如，

Row1Text下拉列表
Row2Text文本框

这在IE 11和Chrome版本35.0.1916.153中发生。但是，它在IE9中运行良好。

    .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>

内

fiddle

Answer 2

我需要使用'display：table-row'而不是'display：block'。这个问题在post：

中得到了解答

Html表固定列宽

2 个答案: