15621857753

拼图前端让table的tbody列表可以上下滚动

来源:齐鲁CMS 栏目:html5 css3 jQuery 阅读: 日期:2024-07-23

拼图前端是一个非常棒的H5前端框架,可以让前端人员在很短的时间内搭建出一个漂亮的静态展示模板,在使用table模块时,假如数据比较多,想要上下滚动官方没有给出方法(至少小编没有找到),下面是小编给出的解决方法。

在拼图前端中,table里面直接使用了tr,在这里,为了使用上下滚动功能,需要使用完善的table结构

也就是,表头要使用thead,表数据要使用tbody,比如:

<table class="table table-line border-light align-center">
    <thead class="bg-light">
        <tr>
            <th>类型</th>
            <th>病人编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>就诊时间</th>
            <th>就诊科室</th>
        </tr>
    </thead>
    <tbody class="text-dark">
        <tr>
            <td>县域内上转</td>
            <td>20240010</td>
            <td>韩尚昊</td>
            <td>男</td>
            <td>2024-7-10</td>
            <td>中医科</td>
        </tr>
    </tbody>
</table>

当然,为了实现滚动的效果,tbody里的数据要多些,这里为了更好讲解,只添加一条数据

重点来了,修改CSS格式,直接使用如下就可以:

table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

table tbody {
    display: block;
    height: 215px;
    overflow-y: scroll;
    width: 100%;
}

table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

当然,如果能使用class包裹起来更好,这里为了更好讲解,就不添加class了

到这里也就可以了,关键点就是添加thead和tbody,然后使用table-layout: fixed浮动起来