一个简单的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：仅供参考，错误可提~