html - 如果 中有文本区域，如何限制 的高度

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 包装功能进行了编辑。

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