用css给tbody加垂直滚动条的具体思路及样式代码

给 tbody 元素添加垂直滚动条是一个常见需求，可以通过以下步骤实现：

1. 设置最外层容器的高度：首先，我们需要确定外层容器的高度。一般情况下，我们可以将其设置为固定高度或相对于视口高度的百分比值。

示例代码：

.container {
  height: 400px; /*设置容器高度*/
}

1. 给 tbody 设置高度和 overflow-y: auto：接着，我们需要给 tbody 元素设置一个固定的高度，并将其 overflow-y 属性设为 auto，使它出现垂直滚动条。

示例代码：

tbody {
  height: 300px; /*设置tbody高度*/
  overflow-y: auto; /*出现垂直滚动条*/
}

以上示例代码中，我们假设 .container 为包裹表格的最外层容器，其高度为 400px；.table 为表格元素，包含 thead 和 tbody 两个子元素；tbody 元素的高度被设置为 300px，且会出现垂直滚动条。

另外，我们还可以使用相对布局（position: relative）和绝对布局（position: absolute）来实现类似的效果。示例如下：

.container {
  height: 400px;
  position: relative;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}

tbody {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

在上述示例中，我们采用了绝对定位来控制 tbody 的高度，设置了它的 top、left、right、bottom 属性来占据整个外层容器的空间，并让其出现垂直滚动条。同时，使用了相对定位（sticky）来让 thead 始终在上方固定显示，不受滚动影响。