css table 垂直滚动条

CSS表格是展示数据的常见方式之一，但是当表格数据过多时，会导致页面过长，影响用户体验。这时候可以通过添加垂直滚动条来解决这个问题。

/*样式代码*/
table {
  border-collapse: collapse;
  width: 100%;
}

thead {
  background-color: #ddd;
}

th,td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

tbody {
  height: 200px; /*设置高度为200px*/
  overflow-y: scroll; /*添加垂直滚动条*/
}

在样式中，通过设置tbody元素的高度，并添加overflow-y属性来实现垂直滚动条的效果。值得注意的是，此处需要给表头元素（thead）添加背景色，以便区分表头和表体，并给表格元素（table）设置border-collapse属性来避免边框重叠。

以上是使用CSS实现表格垂直滚动条的方法，通过这种方式，我们可以更好地展示大量数据，提高用户体验。