一个简单的CSS表格样式
表格:
<div class="table-area fjcenter formating">
<table class="my-table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.position}}</td>
<td>{{item.branch}}</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
样式:
.formating {
margin-top: 15px;
}
/*flex居中,可以使表格居中,若设置了宽度100%可省略*/
/*.fjcenter {
display: flex;
justify-content: center;
}*/
.my-table {
width: 100%;
border: 1px solid black;
/*让表格边框重合*/
border-collapse: collapse;
padding: 5px;
}
.my-table th,td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
/*奇偶数行不同背景色*/
.my-table tr:nth-child(odd) {
background-color: #fff;
}
.my-table tr:nth-child(even) {
background-color: #ccc;
}
ps:仅供参考,错误可提~