css thead 不动 tbody滚动

CSS中的表格是一个非常常见的元素。然而，有时候我们会遇到这样一种情况：表格的头部（thead）需要固定，而表格的主体（tbody）需要滚动。
这时候，我们可以使用CSS来实现这样的效果。

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}
thead {
    position: sticky;
    top: 0;
}
tbody {
    display: block;
    height: 400px;
    overflow-y: scroll;
}
tr {
    display: table-row;
}
td, th {
    padding: 10px;
    border: 1px solid #ccc;
}
    

首先，我们需要把表格的布局（table-layout）设为fixed，并去掉边界间隔（border-spacing），这样可以让表格的宽度固定，并且表格的单元格之间没有空隙。

然后，我们需要将表头的position属性设为sticky，并且将其位置设为距离顶部0像素。这样，当我们滚动 tbody 的时候，表头就会一直保持在页面顶部的位置，不会随着表格的滚动而消失。

接下来，我们需要将tbody的display属性设为block，并且设置一个height属性和overflow-y属性，这样就可以把表格主体的内容放在一个固定高度的容器中，并且在内容高度超过容器高度时出现纵向滚动条。

最后，我们还需要给表格的单元格设置一些样式，例如padding、border等，以便于美化表格。

以上代码就是实现CSS中thead固定tbody滚动的方法。使用CSS来实现这样的效果，不仅可以提高页面的可读性，还可以让我们在实现各种布局时更加灵活。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！