ニレのテーブルに慣れてきたけど、急にオリジナルのテーブルを書きたくなった…。
これは、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;
}
}
}