Html
    Css
    Js

    
                        
.tablebox {
    height: 500px;
    overflow: hidden;
    position: relative;
    width: 1000px;
    margin: 100px auto;
    background-color: rgba(6,26,103,1);
}

.tbl-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.tbl-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.tablebox table {
    width: 100%;
}

.tablebox table th,
.tablebox table td {
    font-size: 24px;
    color: #7ca6f4;
    line-height: 45px;
    text-align: center;
}

.tablebox table tr th {
    background-color: #1f1f9c;
    cursor: pointer;
}

.tablebox table tr td {
    background-color: transparent;
}

.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
    background-color: rgba(31, 31, 156, .5);
}

.tablebox table tr td span,
.tablebox table tr td span {
    font-size: 24px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

table表格无缝向上滚动

代码简单易懂,一看就会,自己琢磨

4
      .0
      2021/6/25 14:21:54
      请问 items中的数据怎么动态获取,谢谢 回复
      fenglihui0
      2018/8/22 14:35:02

      您好,您这个表格的代码很精巧,但是css中感觉有一个小bug(其实也不算是个bug),就是:nth-child(even)这里,按照下标奇偶顺序给表格添加背景色,如果数据个数为偶数,那么就没问题,但是为奇数的话,在一号数据重新回到最上方时,它的颜色会进行变化,也就是不让它和最后一个奇数颜色一样,这样本身是没有问题的,但是整个表格的颜色都会改变一下,就好像卡了一下(其实并没有卡),哈哈!不过还是非常感谢!

      回复
      Changing0
      2018/3/30 16:54:52
      您好,如果表头需要去掉颜色,显示后面的背景颜色该怎么弄,
          西瓜0
          2018/3/30 21:28:24
          css ,37行 background-color: #fff;
      回复