表格内容滚动

表格头固定

         <table class="top">
            <thead style="background:#0F2395;">
              <tr>
                <th>序号</th>
                <th>分类名称</th>
                <th>表头名称</th>
                <th>损伤类型</th>
                <th>损伤程度</th>
                <th>置信度</th>
                <th>置信程度</th>
              </tr>
            </thead>
          </table>
          <div class="scroll-box">
            <table class="tab-scroll">
              <tbody>
                <tr v-for="(item, index) in listData4" :key="index">
                  <td>{{ item.xh }}</td>
                  <td>{{ item.flmc }}</td>
                  <td>{{ item.btmc }}</td>
                  <td>{{ item.sslxmc }}</td>
                  <td>{{ item.sscdsj }}</td>
                  <td>{{ item.zxdsj }}</td>
                  <td>{{ item.zxcd }}</td>
                </tr>
              </tbody>
            </table>
          </div>

写方法

 table() {
      // window.onload = function () {
        var scrollTab = document.getElementsByClassName('tab-scroll')[0];//滚动的表格
        var tbody = scrollTab.getElementsByTagName('tbody')[0];//tbody

        var speed = scrollTab.getElementsByTagName('td')[0].offsetHeight + 1;//行高(滚动速度)	 加上表格边框	
        var count = 0;//要追加到表格底部的行索引 	
        setInterval(scrollTop, 1500);//每隔1.5秒滚动一次

        //实现表格向上滚动
        function scrollTop() {
          var t = scrollTab.offsetTop;//top值
          scrollTab.style.top = t - speed + 'px';//滚动

          var trs = tbody.getElementsByTagName('tr');//每次都重新取出所有内容行				
          var newTr = trs[count].cloneNode(true);//复制行，得到新的行对象
          //将滚动的行追加到表格底部
          tbody.appendChild(newTr);
          count++;
        }
      // };
    },

css样式

 .main .fif_child {
      width: 721.7px;
      height: 295.77px;
      background: url(../assets/img/login/n_bg.png) no-repeat;
      background-size: 100% 100%;
      margin: 15px 20px 0 20px;

      p {
        font-size: 14px;
        font-weight: bold;
        margin-left: 5px;
        margin-top: 6px;
        margin-bottom: 10px;
      }

      table {
        width: 710px;
        border: 2px solid #44BDF1;
        color: #fff;
        border-collapse: collapse;
        font-size: 0.8rem;
        margin-left: 5px;
      }

      th,
      td {
        height: 35px;
        line-height: 35px;
        border: 2px solid #44BDF1;
        color: #fff;
        text-align: center;
        width: 38px;
      }

      .scroll-box {
        height: 218px;
        width: 715px;
        overflow: hidden;
        position: relative;
      }

      .tab-scroll {
        width: 710px;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 1s;
        border-top: none;
      }

      .tab-scroll tr td {
        border-top: none;
      }

      .tab-scroll tr:nth-child(odd) {
        background-color: #1A46A4;
      }

      .tab-scroll tr:nth-child(even) {
        background-color: #2B64CE;
      }

    }