本文demo基于vue开发,可以根据自己的框架整理,本demo满足以下几点
1、表格横向纵向都有滚动条;
2、滚动条美化;
3、固定列设置,本demo固定列举例为第一列;
<template>
<div class="container">
<table>
<thead>
<tr>
<th>序号</th>
<th>标题1标题1标题1标题1标题1</th>
<th>标题2</th>
<th>标题3</th>
<th v-for="i in 100">
{{ i+i+i }}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td v-for="d in 100">
{{ d+d+d }}
</td>
</tr>
<tr v-for="(item , index) in 30">
<td>{{index+2}}</td>
<td>内容1内容1内容1内容1内容1内容1内容1内容1内容1</td>
<td>内容2</td>
<td>内容3</td>
<td v-for="d in 100">
{{ d+d+d }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data () {
return {
}
},
created () {
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.container {
width: 80%;
height: 362px;
position: relative;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
overflow: auto;
&::-webkit-scrollbar {
height: 8px;
width: 8px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
&::-webkit-scrollbar-track {
background-color: #fff;
}
table{
table-layout:fixed;
border: none;
border-collapse: collapse;
background: white;
text-align: center;
thead{
tr{
color: white;
height: 56px;
th{
min-width: 100px;
position:-webkit-sticky;
position:sticky;
top:0;
z-index: 3;
background: #fff !important;
font-size: 14px !important;
color: #222222 !important;
font-weight: bold;
padding: 12px 8px !important;
white-space: nowrap;
}
th:nth-of-type(1) {
background-color: #F4F4F4;
left:0;
z-index:4;
}
}
}
tbody{
tr{
height:30px;
color: #333;
&:nth-child(2n-1){
background: #F4F4F4 !important;
}
td{
min-width: 100px;
position:-webkit-sticky;
position:sticky;
white-space: nowrap;
}
td:nth-of-type(1){
background-color: #F4F4F4;
left: 0;
z-index:3;
}
}
}
}
}
</style>