html - 在没有 JavaScript 的情况下，将两列 HTML 表调整为仅右列

Question

我想只使用 CSS 和 HTML 来完成以下操作，而不是使用 JavaScript。

我有一个看起来像这样的简单 HTML 表格。两列都包含动态内容，但左侧有一个可滚动的 div。我希望该可滚动 div 的显示高度根据表格调整大小，并且表格大小仅由column2.

<table>
    <tr>
        <td class="column1">
            <div>
            ...
            </div>
        </td>
        <td class="column2">
            <div>
            ...
            </div>
        </td>
    </tr>
</table>

我希望表格只根据动态内容调整其高度column2，而不是column1，这样我就可以拥有一个可滚动的 div，其大小为在呈现页面时自动column1设置的表格高度。column2

height()我找到了使用jQuery的解决方案，但是当我使用或查找右列的高度并适当设置左列内的div时，性能很差outerHeight()，尤其是当右列包含大量HTML元素时他们自己的可滚动div。

Answer 1

您可以使用绝对定位：

table {
    position: relative;
}

td {
    background: red;
    width:200px;
}

.column1>div {
    height:100%;
    overflow: auto;
    position: absolute;
    top:0;
    width:200px;
}

<link rel="stylesheet" href="del.css">
<table>
    <tr>
        <td class="column1">
            <div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
            </div>
        </td>
        <td class="column2">
            <div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
            </div>
        </td>
    </tr>
</table>

也可用作jsfiddle。