本文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>
