Force table cell to get the highest height from other cells in a row
This is my HTML:
<table>
<tbody>
<tr>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
</tbody>
</table>
The problem is visible in this fiddle .
Basically, when I resize the text area in one column, I would like the other text area to be the same height as the other (mainly so that the cell grows in height).
I would like to know if CSS-only access is available .
source to share
Adding min-height: 100%;
in textarea
should make it behave like you did after.
table{
border-collapse: collapse;
}
td{
border: 3px dashed red;
padding: 15px;
}
textarea{
resize: vertical;
min-height: 100%;
}
<table>
<tbody>
<tr>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
</tbody>
</table>
EDIT: Given the problems with the above solution, I came up with another way to deal with this, making sure a) works in Firefox (as well as Chrome) and b) allows multiple resizing. This solution does make significant changes:
- Extra
div
aroundtable
that handles size -
textarea
no longer resizes
The reason for this is that resizing the element sets on it height
, so if you resize the textarea
contained cell will grow to fit it; if you then try to shrink another textarea
, it won't work because the cells have grown to fit height
more textarea
.
div {
float: left;
overflow: auto;
position: relative;
resize: vertical;
}
table {
border-collapse: collapse;
height: 100%;
}
td {
border: 3px dashed red;
height: 100%;
padding: 15px;
}
textarea {
height: 100%;
resize: none;
}
<div>
<table>
<tbody>
<tr>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
</tbody>
</table>
</div>
JS Fiddle: http://jsfiddle.net/m7t5cqk8/
source to share