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

尝试并放一个

MATCH (i:Item { name: "Foo"}) RETURN i

在文本区域样式/类

上

如果内部有文本区域，如何限制高度

3 个答案: