Textarea必须重叠div而不增加div高度

Question

我有一个表格，其中显示带有标签和输入字段的表单。我想要做的是创建一个文本框重叠表中的行，而不会改变文本区所在的行高度。

我想这样做，因为在行中有更多的输入字段，我想包含那些其他行的高度。

HTML：

 <table class="table"> 
      <thead></thead> 
      <tbody> 
       <tr class="form-row-1"> 
        <!-- Column 1 row 1--> 
        <td class="form-column column-label-1"> 
         <form> 
          <label>Abonnement</label> 
         </form> 
        </td> 
        <td class="form-column column-content-1"> 
         <form> 
          <input type="text" name="Abonnement"> 
         </form> 
        </td> 

        <!-- Column 2 row 1 --> 
        <td class="form-column column-label-2"> 
         <form> 
         <!-- Add input fields here to create labels --> 
         </form> 
        </td> 
        <td class="form-column column-content-2"> 
         <form> 
         <!-- Add input fields here to create input/select fields --> 
         </form> 
        </td> 

        <!-- Column 3 row 1--> 
        <td class="form-column column-label-3"> 
         <form> 
          <label>Abonnementsstatus:</label> 
         </form> 
        </td> 
        <td class="form-column column-content-3"> 
         <form> 
          <select name=" "> 
           <option value="niks">Non-actief</option> 
          </select> 
         </form> 
        </td> 
       </tr> 
       <tr class="form-row-2"> 
        <!-- Column 1 row 2--> 
        <td class="form-column column-label-1"> 
         <form> 
          <label>Omschrijving</label> 
         </form> 
        </td> 
        <td class="form-column column-content-1"> 
         <form> 
          <textarea rows="1" cols="30" name="lastname" style="overflow-y:expand;"></textarea> 
         </form> 
        </td> 
        <!-- Column 2 row 2--> 
        <td class="form-column column-label-2"></td> 
        <td class="form-column column-content-2"></td> 

        <!-- Column 2 row 3--> 
        <td class="form-column column-label-3"> 
         <form> 
          <label>Frequentie:</label> 
         </form> 
        </td> 
        <td class="form-column column-content-3"> 
         <form> 
          <select name=" "> 
           <option value="niks">Non-actief</option> 
          </select> 
         </form> 
        </td> 
       </tr> 
       <tr class="form-row-3"> 
        <!-- Column 3 row 1--> 
        <td class="form-column column-label-1"></td> 
        <td class="form-column column-content-1"></td> 
        <!-- Column 3 row 2--> 
        <td class="form-column column-label-2"></td> 
        <td class="form-column column-content-2"></td> 

        <!-- Column 3 row 3--> 
        <td class="form-column column-label-3"> 
         <form> 
          <label>Frequentiebereik:</label> 
         </form> 
        </td> 
        <td class="form-column column-content-3"> 
         <form> 
          <select name=" "> 
           <option value="niks"></option> 
          </select> 
         </form> 
        </td> 
       </tr> 
       <tr class="form-row-4"> 
        <!-- Column 4 row 1--> 
        <td class="form-column column-label-1"></td> 
        <td class="form-column column-content-1"></td> 
        <!-- Column 4 row 2--> 
        <td class="form-column column-label-2"></td> 
        <td class="form-column column-content-2"></td> 

        <!-- Column 4 row 3--> 
        <td class="form-column column-label-3"> 
         <form> 
          <label>Bet. voorwaarden:</label> 
         </form> 
        </td> 
        <td class="form-column column-content-3"> 
         <form> 
          <select name=" "> 
           <option value="niks"></option> 
          </select> 
         </form> 
        </td> 
       </tr> 
       <tr class="form-row-5"> 
        <!-- Column 5 row 1--> 
        <td class="form-column column-label-1"></td> 
        <td class="form-column column-content-1"></td> 
        <!-- Column 5 row 2--> 
        <td class="form-column column-label-2"></td> 
        <td class="form-column column-content-2"></td> 

        <!-- Column 5 row 3--> 
        <td class="form-column column-label-3"> 
         <form> 
          <label>Onze ref.:</label> 
         </form> 
        </td> 
        <td class="form-column column-content-3"> 
         <form> 
          <select name=" "> 
           <option value="niks"></option> 
          </select> 
         </form> 
        </td> 
       </tr> 
       <tr class="form-row-6"> 
        <!-- Column 6 row 1--> 
        <td class="form-column column-label-1"></td> 
        <td class="form-column column-content-1"></td> 
        <!-- Column 6 row 2--> 
        <td class="form-column column-label-2"></td> 
        <td class="form-column column-content-2"></td> 

        <!-- Column 6 row 3--> 
        <td class="form-column column-label-3"> 
         <form> 
          <label>Referentie:</label> 
         </form> 
        </td> 
        <td class="form-column column-content-3"> 
         <form> 
          <input type="text"> 
         </form> 
        </td> 
       </tr> 
       <!-- More table rows below--> 

      </tbody> 
     </table> 
    </div> 

CSS：

textarea { 
    overflow-y:hidden; 
    resize:vertical;  
} 

select { 
    vertical-align:baseline; 
    width:100%; 
    box-sizing:border-box; 
} 

td { 
    vertical-align:top; 
} 

的jsfiddle here;

所以，如果我拖动我的textarea，行的高度必须保持不变。 这可能使用CSS，HTML，JavaScript？

Answer 1

在此JS Fiddle

<td class="form-column column-content-1" rowspan="5"> 
        <form> 
         <textarea rows="1" cols="30" name="lastname" style="overflow-y:expand;"></textarea> 
        </form> 
       </td> 

另外在textarea规则添加到你的CSS：

max-height:120px; 

所以它永远不会毁了你的表单设计

Answer 2

你可以试试这个先生：

textarea { 
    overflow-y:hidden; 
    resize:vertical; 
    position:fixed; 
    width:167px; 
} 

select { 
    vertical-align:baseline; 
    width:100%; 
    box-sizing:border-box; 
} 

td { 
    vertical-align:top; 
} 

DEMO HERE

或

textarea { 
    overflow-y:hidden; 
    resize:vertical; 
    max-height:120px; 
    width:167px; 
} 

select { 
    vertical-align:baseline; 
    width:100%; 
    box-sizing:border-box; 
} 

td { 
    vertical-align:top; 
} 

DEMO UPDATED