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 , 这样我就可以在 column1 中有一个可滚动的 div大小为 column2 设置的表格高度呈现页面时自动。

我找到了使用 jQuery 的解决方案，但是当我使用 height() 时性能很差或 outerHeight()找到右栏的高度并适本地设置左栏内的 div，尤其是当右栏包含大量 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 .