css tbody 做滚动条

CSS中，tbody标签可以被用来创建一个带滚动条的表格。 通常情况下，当表格的大小超出了它父容器的大小时，表格会出现滚动条。但是，在某些情况下，我们可能需要控制表格中哪些部分需要滚动，这就需要使用tbody标签来控制滚动条了。 首先，我们需要为tbody标签添加一个样式，将其转换为一个拥有固定高度和可滚动性的块元素。这可以通过设置tbody样式中的“display”属性为“block”，同时设置“height”和“overflow”属性来完成。下面的CSS代码演示了如何将tbody转换为可滚动的块元素：

  tbody{
      display:block;
      height:150px;
      overflow:auto;
  }

在这个例子中，tbody被设置为一个包含固定高度的块元素，并且继承了overflow:auto样式，使它可以拥有自己的滚动条。 此外，在表格中加上“thead”和“tfoot”元素也会影响表格的滚动条。如果表格中同时存在“thead”和“tbody”元素，那么当滚动条到达表格的顶部或底部时，“thead”元素会保持固定不动，而“tbody”元素将会滚动。同样，如果表格中存在“tfoot”元素，那么所有的“tfoot”元素也将会保持固定不动。

  thead{
      position:sticky;
      top:0;
      }
 
  tfoot{
      position:sticky;
      bottom:0;
  }

结论： 使用tbody标签可以轻松地实现带有滚动条的表格，使得表格可以更好地适应容器大小。同时，通过添加“thead”和“tfoot”元素，也可以控制表格的滚动样式。