使用div利用布局实现表格的效果加粗样式
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;
}
效果图