我在一个表中有两列。第一列包含固定文本。单击复选框时,第二列的文本会展开。问题是当第二列的文本展开时,第一列的文本向上/向下移动。如何修复第一列文本?
<HEAD>
<STYLE>
div.c220{ width:220px; overflow:hidden; }
/*div.c150{ width:150px; overflow:hidden; }
div.c70{ width:170px; overflow:hidden; }*/
.inputs {
display: none;
}
.foo:checked + .inputs {
display: initial;
}
.tab { margin-left: 20px; }
</STYLE>
</HEAD>
<html>
<body>
<table style="width:100%">
<tr>
<td><div class="c220"><p><B>THIS TEXT SHOULD NOT MOVE</B></p>
<form><input type="checkbox">This text should not move when the model checkbox is clicked</form></div></td>
<td><div class="c220"><p><B>MODEL:</B></p>
<form action="foo">
<input type="checkbox" class="foo"> Model #
<div class="inputs">
<input type="text" size="12"><BR>
<input type="checkbox">See Diagram Attached
</div>
</form>
</div><br>
<div class="c220"><p><B>ANOTHER MODEL:</B></p>
<form action="foo">
<input type="checkbox" class="foo"> Model #
<div class="inputs">
<input type="text" size="12"><BR>
<input type="checkbox">See Diagram Attached
</div>
</form>
</div>
</div></td>
</tr>
</table>
<hr />
</body>
</html>
最佳答案
你也可以在div里面设置静态高度
关于html - 如何修复html表格中的列文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45907840/