原生table实现tbody的上下滚动,代码为:
table tbody {//tbody实现上下滚动 display: block; height: 189px; overflow-y: auto; } table thead, tbody tr, tfoot tr { display: table; width: 100%; height: 40px; table-layout: fixed; font-size: 14px; font-family: Microsoft YaHei; text-align: center; } table thead {//减去滚动条宽度 width: calc(100% - 1em); }.table-div {//table外部设置滚动条做法 width: 100%; overflow-x: auto; }
如果要实现左右滚动,需要在上面代码的基础上给每个td设置固定宽高,但这样实现的效果会导致如果tbody设置上下滚动,他会出现在整个表格的最后面,数据过长的话,会看不到上下的滚动条,代码仅供参考,基本不变,一些样式设置在你们电脑上不行,布局不同导致的。
有哪位朋友解决了,可以留言,相互学习,菜鸟一枚。