文章/答案/技术大牛

发布

社区首页 >问答首页 >大小为两列的HTML表仅为不带JavaScript的右列

问大小为两列的HTML表仅为不带JavaScript的右列
EN

Stack Overflow用户

提问于 2012-06-01 00:24:40

回答 1查看 284关注 0票数 1

我只想使用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，该div的大小可以自动调整到column2设置的表的高度。

我已经找到了使用jQuery的解决方案，但是当我使用height()或outerHeight()查找右列的高度并适当地在左列内设置div时，性能非常差，特别是当右列包含大量HTML元素时，这些元素位于它们自己的可滚动div中。

html

css

html-table

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-06-01 00:41:46

您可以使用绝对定位：

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>

也可以作为小提琴使用。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10842980

复制

相似问题

问大小为两列的HTML表仅为不带JavaScript的右列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问大小为两列的HTML表仅为不带JavaScript的右列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问大小为两列的HTML表仅为不带JavaScript的右列
EN