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

【问题标题】：how to fix the column text in html table如何修复html表格中的列文本
【发布时间】：2017-08-27 17:59:21
【问题描述】：

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

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

【问题讨论】：

你可以从修复标记开始，有开始标签没有结束标签，两个开始标签一个接一个，比如<td><td>，这是不正确的，和结束标签一样.

标签： html css

【解决方案1】：

你也可以在td里面设置静态高度

【讨论】：

@familyGuy 静态高度不是一个好的解决方案，因为它很可能会导致意外溢出问题
@LGSon 你能建议另一种解决方案吗？谢谢！
@familyGuy 当您解决我在问题下方评论的内容时，您可以告诉我，我会看看
@familyGuy 你能改变 td 内的对齐方式吗？ jsfiddle.net/0xtmqmje/1这里是另一种解决方案，没有高度

【解决方案2】：

将vertical-align: top; 设置为第一个表格单元格可能会有所帮助：

<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 style="vertical-align: top;"><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>

【讨论】：