您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在可滚动的div中制作固定的标题表?

如何在可滚动的div中制作固定的标题表?

怎么做这样的事情?我从头开始…

我所做的是使用2个表,一个表用于标题,该表始终是静态的,而另一个表呈现单元格,我使用div固定高度的元素包装了这些单元格,并启用了滚动,overflow-y: auto;

还要确保您使用table-layout: fixed;固定宽度的td元素,以便在table使用不带字符串的情况下不会断线white space,以便在使用时断开该字符串word-wrap: break-word;

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>
其他 2022/1/1 18:13:36 有577人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶