用惯了elm的table,突然要写一个原始的table….
这里是template部分,简简单单,用tr,td写的
<div class="statistics_san">
<table border="1" cellpadding="0" cellspacing="0" class="table_bei">
<thead>
<tr class="hearter">
<td>公司</td>
<td>蒸汽量(m³)</td>
<td>历史平均</td>
<td>标准</td>
<td>平均室温(℃)</td>
</tr>
</thead>
<tbody clsss="tBody">
<tr v-for="(item, index) in zqlList" :key="index">
<td>{{ item.sub }}</td>
<td>{{ item.zql }}</td>
<td>{{ item.lspj }}</td>
<td>{{ item.bz }}</td>
<td>{{ item.pjsw }}</td>
</tr>
</tbody>
</table>
</div>
用vue3写的假数据
let zqlList = ref([
{ sub: "公司2", zql: 378, lspj: 109, bz: 100, pjsw: 22 },
{ sub: "公司3", zql: 233, lspj: 233, bz: 100, pjsw: 22 },
{ sub: "公司4", zql: 345, lspj: 42, bz: 100, pjsw: 24 },
{ sub: "公司5", zql: 123, lspj: 234, bz: 100, pjsw: 26 },
{ sub: "公司6", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
{ sub: "公司7", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
{ sub: "公司8", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
{ sub: "公司9", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
{ sub: "公司10", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
{ sub: "公司11", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
{ sub: "公司12", zql: 234, lspj: 88, bz: 100, pjsw: 27 }
]);
其实我想表达的是–如果数据特别多,我想让他滚动滚动滚动滚动….
这里是我的css部分….
.statistics_san {
position: absolute;
width: 96%;
height: 30vh;
top: 68%;
.table_bei {
border: 1px solid #246a9c;
height: 22vh;
width: 100%;
text-align: center;
margin-left: 8px;
color: #ecedee;
font-size: 12px;
margin-top: 32px;
display: inline-block;
.table_bei td {
text-align: center;
}
thead {
width: 100%;
height: 36px;
display: inline-block;
padding-right: 0.5rem;//这个地方是留给右边的滚动条,防止单元格对不齐
}
tbody {
width: 100%;
height: 17vh;
overflow-y: auto;
display: block;
}
thead tr {
height: 100%;
width: 100%;
display: table;
table-layout: fixed;
}
tbody tr {
width: 100%;
height: 23px;//身体部分每行的高度
display: table;
table-layout: fixed;
}
.hearter {
background-color: #042948;
}
}
}
版权声明:本文为weixin_47194802原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。