[英]Html table fixed column width
我有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>
将您的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>
我需要使用“ display:table-row”而不是“ display:block”。 这个问题在这篇文章中得到了回答:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.