html - 根据 TR 中最大的 TD 设置高度

Question

我正在构建一个 HTML 表格并使用 Internet Explorer 11。在每个 TR 中都有几个 TD，其中嵌入了不同大小的元素。我通过 IE DOM 资源管理器检查了该页面，并认为我知道发生了什么。通常 textarea 是最大的元素(根据 CSS 为 167px)，但有时其他 td 元素之一会更大(比如 td1=300px)。我遇到的问题是我希望文本区域填充到 300px。我可以看到高度是从 td id="td3"继承的，它仍然是 167px。有没有办法让 td id="td3"从 tr 中最大的兄弟 td 获取高度。

HTML 看起来像这样

<thead>
   ...
</thead>
<tbody>
    <tr>
        <td id="td1">[Dynamic Text1]</td>
        <td id="td2">[Dynamic Text2]</td>
        <td id="td3"><textarea class="ta"></textarea></td>
    </tr>
    <tr>
    ...
    </tr>
    <tr>
    ....
</tbody>

CSS

.ta{
    height: 100%;
    min-height: 167px
}

---

一件事是我注意到 Chrome 做了我想要的，但我更喜欢符合标准的解决方案

Answer 1

确保您没有 HTML 错误(尝试使用 w3.org 验证程序进行验证)。这通常是不同渲染引擎之间突然出现显示错误的原因。无论如何，您的示例在这里似乎运行良好:

td {
    min-height: 200px;
    background: lightblue;
    vertical-align: top;
}

textarea {
    display: block;
    height: 100%;
    min-height: 50px;
}

http://jsfiddle.net/Kg3P5/2/