强制表格单元格从一行中的其他单元格中获取最大高度

Question

这是我的 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>

问题在这个fiddle 中可见。

基本上，当我在一列中调整 textarea 的大小时，我希望另一个 textarea 具有与另一列相同的高度（基本上是强制单元格增加高度）。

我想知道是否有适用于此的纯 CSS 方法。

Answer 1

将min-height: 100%; 添加到textarea 应该使其行为符合您的要求。

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>

编辑： 鉴于上述解决方案的问题，我想出了另一种处理方法，以确保 a) 它可以在 Firefox（以及 Chrome）和 b) 中运行允许多次调整大小。此解决方案确实进行了一些重大更改：

• 处理调整大小的table 周围有一个额外的div
• textareas 不再调整大小

这背后的原因是调整一个元素的大小会在它上面设置一个height，所以如果你调整一个textarea 的大小，包含的单元格会增长以适应它；如果您然后尝试缩小另一个 textarea 它不起作用，因为单元格已经长大以适应较大的 textarea 的 height。

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 小提琴： http://jsfiddle.net/m7t5cqk8/