<template><div class="monitor-table-container"><table class="monitor-table"><thead><th>标题</th><th>标题</th><th>标题</th><th>标题</th></thead><tbody ref="scrollTbody" v-for="index in 2" :key="index"><tr v-for="item in 6" :key="item"><td>value</td><td>value</td><td>value</td><td>value</td></tr></tbody></table></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="less">
@keyframes scroll {0% {transform: translateY(0);}100% {transform: translateY(-100%);}
}table thead,
tbody tr {display: table;width: 400px;table-layout: fixed;
}.monitor-table-container {width: 400px;overflow: hidden;height: 240px;border: 1px solid red;
}.monitor-table {position: relative;thead {position: absolute;z-index: 1;background: rgb(223, 239, 254);th {text-align: center;padding: 8px 16px 7px 16px;color: rgba(51, 51, 51, 1);}}tbody {z-index: 0;animation: scroll 5s linear infinite;display: block;tr {border-bottom: 1px solid rgba(153, 153, 153, 0.2);td {text-align: center;padding: 8px 16px 7px 16px;color: rgba(51, 51, 51, 1);}}}
}
</style>