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

拼图前端是一个非常棒的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浮动起来