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

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
• textarea 不再调整大小

这背后的原因是调整元素的大小会为其设置一个高度，因此如果您调整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 fiddle : http://jsfiddle.net/m7t5cqk8/