赞
踩
html代码
<div class="table"> <div class="thead"> <div class="tr"> <div class="th"> 用户名 </div> <div class="th"> 角色名 </div> <div class="th edit"> 操作 </div> </div> </div> <div class="tbody"> <div class="tr"> <div class="td"> 陈兰秀 </div> <div class="td"> 财务 </div> <div class="td edit"> <span onclick="editRole()">编辑</span> | <span onclick="delRole()">删除</span> </div> </div> <div class="tr"> <div class="td"> 吕洋 </div> <div class="td"> 技术经理 </div> <div class="td edit"> <span>编辑</span> | <span>删除</span> </div> </div> <div class="tr"> <div class="td"> 吕洋 </div> <div class="td"> 技术经理 </div> <div class="td edit"> <span>编辑</span> | <span>删除</span> </div> </div> <div class="tr"> <div class="td"> 吕洋 </div> <div class="td"> 技术经理 </div> <div class="td edit"> <span>编辑</span> | <span>删除</span> </div> </div> <div class="tr"> <div class="td"> 吕洋 </div> <div class="td"> 技术经理 </div> <div class="td edit"> <span>编辑</span> | <span>删除</span> </div> </div> <div class="tr"> <div class="td"> 吕洋 </div> <div class="td"> 技术经理 </div> <div class="td edit"> <span>编辑</span> | <span>删除</span> </div> </div> </div> </div>
css样式
.table .thead { width: 100%; display: flex; border-bottom: 1px solid #ccc; border-bottom-color: rgba(205, 206, 207, 0.5); align-items: center; height: 45px; background-color: rgba(189, 188, 188,0.1); } .table .tbody { font-weight: lighter; } .tbody .tr,.thead .tr{ width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: bolder; } .tbody .tr{ height: 40px; border-bottom: 1px solid #ccc; border-bottom-color: rgba(205, 206, 207, 0.5); } .tr .td,.tr .th { flex:8; } .tr .edit { flex:1; cursor: pointer; color: #FF7002; } .thead .tr .edit { display: flex; justify-content: center; cursor: none; color: #000; }
效果图
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。