博客

在vue中使用html表格

<template>
<div class="table" style="overflow-y: auto; height:15em; width:100%"> //overflow-y控制y轴滚动
	<table border="0" width="100%" height="16em" cellpadding="4.8" align="center">
		<tr>
			<th>排名</th>
			<th>道路名称</th>
			<th>拥堵指数</th>
			<th>平均车速</th>
		</tr>
		<tr>
			<td>1</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
		<tr>
			<td>2</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
		<tr>
			<td>3</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
		<tr>
			<td>4</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
		<tr>
			<td>5</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
		<tr>
			<td>6</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
		<tr>
			<td>7</td>
			<td>学院路</td>
			<td>90</td>
			<td>20</td>
		</tr>
	</table>
</div>
</template>
<style>
.table {
	tr:nth-child(2n+3){
		background-color: rgb(22, 73, 150);
	} //不同行换色
	tr:nth-child(1){
		background-color: rgb(16, 112, 201);
	}
	table tr{
		text-align: center;
	} //文本居中
	table th{
		text-align: center;
	}
	table td{
		text-align: center;
	}
}
</style>