如何限制的<tr>的高度，如果裏面有​​

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> 

文本區域的Thje高度靈活。我的問題是包裝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>

Answer 2

嘗試，把一個

max-height: xx px; 

在文本區域樣式

/類

Answer 3

試試這個

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