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

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

上一篇:html5新增标签属性


下一篇:JavaScript---DOM