0\ 效果展示
1\ 问题分析
- 当数据较多时,页面整体会因为高度超出,出现浏览器默认的滚动条,表头随之滚动,不便于查看。
- 使表头固定,不让浏览器出现滚动条,只在表体数据出现滚动条,而默认滚动条样式太丑,需要优化。
2\ 解决方案
首先构建页面基础布局,实现基本功能
然后进行页面优化
表头固定
此处所用的代码都是根据上图的页面设计来的,不必拘泥于此,可以根据实际情况调整。
主要目的是实现表头固定和滚动条优化
<!-- 列表展示 -->
<template>
<div class="table-wrapper">
<div class="table-head">
<table>
<colgroup>
<col style="width:70px" />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<td>序号</td>
<td>时间</td>
<td>货1</td>
<td>货2</td>
<td>货3</td>