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

Question

我有一个具有以下结构的html表

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

文本区域的高度是灵活的。 我的问题是包装纸的tr / td高度不应根据文本区域增加。

我想要tr / td高度常数并且文本区域高度应该溢出td

不幸的是，我没有更改html的自由。 我正在寻找纯粹基于CSS的解决方案。

代码： https ： //jsfiddle.net/5u1mk39t/2/

Answer 1

这更接近您的追求吗？ 为jQuery wrap函数编辑。

 $("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

尝试这个

    <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

尝试把

max-height: xx px;

在文本区域的样式/类