CODEWITHSUNDEEP
htmlcss
familyGuy
familyGuy

Reputation: 435

how to fix the column text in html table

I have two columns in a table. First column contains the fixed text. The second column's text expands when the checkbox is clicked. The issue is that when the second column's text expands, the first column's text moves up/down. How can I fix the first column text? 

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

Upvotes: 0

Views: 221

Answers (2)

crazko
crazko

Reputation: 869

Setting vertical-align: top; to the first table cell might help:

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

Upvotes: 1

Dmytro Lishtvan
Dmytro Lishtvan

Reputation: 808

you can set static height too div inside td

Upvotes: 1

Related Questions