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。

将两列HTML表格大小调整到只有右侧列而不使用JavaScript

1 个答案: