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

Posted 2021-05-25 奔跑的哈密瓜

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

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