CODEWITHSUNDEEP
htmlcsstextareahtml-table
Zubzob
Zubzob

Reputation: 2743

Force table cell to get the biggest height from the 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 textarea in one column, i'd like the other textarea to have the same height as the other one (basically force the cell to increase the height).

I'd like to know whether there's a CSS-only approach available to this.

Upvotes: 4

Views: 2191

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

Adding min-height: 100%; to textarea should make it behave in the way you are 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've come up with another way of handling this making sure that a) it works in Firefox (as well as Chrome) and b) allows for multiple resizes. This solution does make some major changes:

  • An extra div around the table that handles the resize
  • The textareas no longer resize

The reason behind this is that resizing an element sets a height on it, so if you resize a textarea the containing cell grows to fit it; if you then try and shrink the other textarea it doesn't work because the cells have grown to fit the height of the larger 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/

Upvotes: 1

Related Questions