html - 如何修复html表格中的列文本

标签 html css

我在一个表中有两列。第一列包含固定文本。单击复选框时,第二列的文本会展开。问题是当第二列的文本展开时,第一列的文本向上/向下移动。如何修复第一列文本?

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

相关文章:

html - Nav 使字体变粗

html - 当单击工具 div 按钮时 ( :active) works fine in Firefox but not in IE

javascript - 如何使用 Google 脚本自定义图表图例

javascript - 将图标移动到悬停或单击的元素的绝对位置

jquery - 如何在焦点元素上使用悬停规则?

jquery - CSS select 基于逻辑层级

javascript - 一切就绪,但我的移动彩虹 Canvas 无法正常工作

javascript - 我无法让 javascript 更改页面上的文本

javascript - 如何在 JavaScript 中下载巨大的 CSV 文件

javascript - Jquery多次附加html文件并传递参数