<template>
<table>
<thead>
<tr>
<th v-for="(item,index) in 10" :key="index">表头</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in 12" :key="index">
<td v-for="(item,index) in 10" :key="index">{{index+1}}</td>
</tr>
</tbody>
</table>
</template>
<style lang="less" scoped>
table {
width: 100%;
height: 100%;
thead {
width: 100%;
table-layout: fixed;
display: table;
th {
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid;
background-color: #bad3f2;
}
}
tbody {
display: block;
overflow-y: scroll;
height: 300px;
width: calc(100% + 8px); //tbody增加一个滚动条的宽度
tr {
width: 100%;
table-layout: fixed;
display: table;
td {
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid;
border-top: 0;
}
}
}
}
</style>