Question

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

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

Answer 1

你可以在td

中设置静态高度

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何修复html表中的列文本

2 个答案: