原生table 样式 以及 无限滚动

使用原生table 设计表头样式以及行内样式

table滚动

<div
								 class="rowup"	style="width: 100%;margin:  0; padding: 0 21px; box-sizing: border-box; ">
									<table style="width: 100%; height: 100%; ">
										<thead class='theadstyle'>
											<tr>
												<th>学校名称</th>
													<th>当年教育装备指标投入</th>
												<th>活动教室（区域）总数</th>
											</tr>
										</thead>
							
										<tbody>
							
											<tr v-for="(item, index) in table1">
												<td class="textover" style="min-width: 20px;max-width:6vw;color: #fff;">
													{{ item.childSchool }}
												</td>
												<td class="textover" style="min-width: 20px;max-width:6vw;color: #fff;">
													{{ item.money }}
												</td>
												<td class="textover" style="min-width: 20px;max-width:6vw;color: #fff;">
													{{ item.classes }}
												</td>
												<!-- <td class="textover" style="min-width: 20px;max-width:6vw;color: #fff;">
													{{ item.engtime }}
												</td>
												<td class="textover" style="min-width: 20px;max-width:6vw;color: #fff;">
													{{item.shengtime}}
												</td>
												<td class="textover" style="min-width: 20px;max-width:6vw;color: #fff;">
													<el-tag v-if='item.status ==1' type="success">进行中</el-tag>
													<el-tag v-if='item.status ==2' type="danger">已逾期</el-tag>
												</td> -->
											</tr>
							
										</tbody>
							
									</table>
								</div>

滚动样式

.rowup {
        -webkit-animation: 5s rowup linear infinite normal;
        animation: 5s rowup linear infinite normal;
        position: relative;
    }
    
    @keyframes rowup {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    
        100% {
            -webkit-transform: translate3d(0, -300px, 0);
            transform: translate3d(0, -300px, 0);
        }
    }

	table {
		border-collapse: collapse;
		// width: 800px;
		text-align: center;
		font-size: .5vw;
		// background-color: ;
	}

	tr {
		height: 50px;
	}

	th {
		height: 30px;
		background: #0C4B7C;
		border: none;
		color: #33AEF5;
	}

	// thead tr {
	// 	border-bottom: 1px solid #e3e3e3;
	// }

	// td {
	// 	border-bottom: 1px solid #e3e3e3;
	// }

	tbody tr:nth-child(2n) {
		background: rgba(68, 202, 255, 0.05);
	}

	tbody tr:hover {
		background: rgba(68, 202, 255, 0.05);
	}

	.nihaoa {
		width: 100%;
		margin: 0;
		height: 50px;
		overflow: auto;
		padding: 0 21px;
		box-sizing: border-box;
		position: absolute;
top: -1px;
		left: 0;
		background-color:#013060;
		z-index: 9999;
	}

 展示页面