普通table的样式

<template>
	<div>
		<table border="1">
			<thead>
				<tr>
					<th class="width-5">序号</th>
					<th class="width-15">天气</th>
					<th class="width-20">温度</th>
					<th class="width-20">湿度</th>
					<th class="width-20">光照</th>
					<th class="width-20">时间</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for='(item,index) in tableData' :key='index'>
					<td class="width-5">{{index+1}}</td>
					<td class="width-15">{{item.pName}}</td>
					<td class="width-20">{{item.name}}</td>
					<td class="width-20">{{item.num}}</td>
					<td class="width-20">{{item.num}}</td>
					<td class="width-20">{{item.time}}</td>
				</tr>
			</tbody>	
		</table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [{
						pName: '安',
						name: '安保0111111111111111111111111111111111111111111111111111111111',
						deptName: '安保部',
						num: 12,
						time:'2023/01/01 12:00:00'
					},
					{
						pName: '安',
						name: '安保02',
						deptName: '安保部',
						num: 56,
						time:'2023/01/01 12:00:00'
					},
					{
						pName: '安',
						name: '安保03',
						deptName: '安保部',
						num: 1,
						time:'2023/01/01 12:00:00'
					},
					{
						pName: '陈默',
						name: 'can01',
						deptName: '餐饮部',
						num: 36,
						time:'2023/01/01 12:00:00'
					},
					{
						pName: '陈默',
						name: 'can02',
						deptName: '餐饮部',
						num: 30,
						time:'2023/01/01 12:00:00'
					},
					{
						pName: '房',
						name: '房01',
						deptName: '房务部',
						num: 89,
						time:'2023/01/01 12:00:00'
					},
				],
				
			};
		},
		mounted() {
		},
		methods: {
			
		}
	};
</script>
<style lang="scss" scoped>
	table{
		width:100%;
		table-layout:fixed;
	    border-collapse:collapse;
	}
	table,th, td{
	    border: 1px solid #dfe6ec;
	}
	thead{
		background-color: #f8f8f9;
		color: #515a6e;
		th{
			padding:8px 0;
			text-align: center;
		}
	}
	tbody tr:hover,
	tbody tr:nth-of-type(2n){
		background-color: #f8f8f9;
	}
	tbody{
		td{
			font-size: 13px;
			color:#606266;
			padding:7px 0;
			font-weight: 500;
			text-align: center;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
	}
	.width-5{
		width:5%;
	}
	.width-10{
		width:10%;
	}
	.width-15{
		width:15%;
	}
	.width-20{
		width:20%;
	}
</style>