如何限制高度 <tr> 如果里面有文字区域 <td>

Question

I have a html table with following structure

<table>
<tr class="border_bottom">
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><textarea></textarea></td>
</tr>
</table>

Thje height of text area is flexible. My problem is the wrapper tr/td height should not be increased as per the text area.

I want tr/td height constant and text area height should be overflow the td

Unfortunately I dont have the liberty to change html. I am looking for a solution purely based on css.

Code: https://jsfiddle.net/5u1mk39t/2/

Answer 1

Is this closer to what you're after? Edited for jQuery wrap function.

 $("textarea").wrap("<div class='with-textarea'></div>"); 

 tr.border_bottom td { border: 1pt solid black; } tr.border_bottom td textarea { width: 200px; } .with-textarea { height: 55px; } textarea { resize: vertical; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="border_bottom"> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <textarea></textarea> </td> </tr> </table> 

Answer 2

Try this

    <style>
tr.border_bottom td {
  border:1pt solid black;
}
tr.border_bottom td textarea{
 width:200px; 
 max-height: 55px; 
}
</style>
<table>
<tr class="border_bottom">
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td><textarea></textarea></td>
</tr>

</table>

Answer 3

Try and put a

max-height: xx px;

on the text area style / class