原生table实现tbody左右滚动,整个table实现上下滚动

原生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设置上下滚动,他会出现在整个表格的最后面,数据过长的话,会看不到上下的滚动条,代码仅供参考,基本不变,一些样式设置在你们电脑上不行,布局不同导致的。

有哪位朋友解决了,可以留言,相互学习,菜鸟一枚。

posted @ 2021-05-25 01:39  奔跑的哈密瓜  阅读(1615)  评论(0编辑  收藏  举报