如何修復html表中的列文本

我在表中有兩列。第一列包含固定文本。單擊複選框時，第二列的文本將展開。問題是當第二列的文本展開時，第一列的文本向上/向下移動。我如何解決第一列文本？如何修復html表中的列文本

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

來源

2017-08-27 familyGuy

您可以從修復標記開始，在標記中有沒有結束標記的開始標記，有兩個開始標記，如''，這是不正確的，並且與結束標記相同。 – LGSon

你可以設置靜態的高度太格內TD

來源

2017-08-27 18:08:36

@familyGuy靜態高度不是一個好的解決方案，因爲它很可能會導致意外溢出的問題 – LGSon

@LGSon您能否提出另一種解決方案？謝謝！ – familyGuy

@familyGuy當你提到我在下面評論的問題，你可以讓我知道，我會看看 – LGSon

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

來源

2017-08-27 18:39:18 crazko

如何修復html表中的列文本

回答

相關問題