带斜线的表格, 这个 经常使用但是每次还得找 所以记录下来,下次有需求直接 copy~~
上结构
====================================== HTML 结构 ===========================
<div class="tabwidth"> <table> <tr class="theader"> <td class="w100" style="border-top-left-radius: 12px;"> <span class="s1">等级</span> <p></p> <span class="s2">分配</span> </td> <td>在线一级</td> <td style="border-top-right-radius: 12px;">在线二级</td> </tr> <tr> <td>应发</td> <td>{{1}}</td> <td>{{2}}</td> </tr> <tr> <td>已发</td> <td>{{3}}</td> <td>{{4}}</td> </tr> <tr> <td>待发</td> <td>{{5}}</td> <td>{{6}}</td> </tr> </table> </div> ============================================结构完成 =============================================== 上样式 ============================================ CSS ================================================= <style lang="less" scoped> // 样式是 用less 写的 .tabwidth { width: 500px; table { border-collapse: collapse; border: 1px solid rgb(241, 242, 244); width: 92%; margin: 20px 0 0 0; border-radius: 10px; border-style: hidden; box-shadow: 0 0 0 1px #d8d8d8; td { width: 111px; border: 1px solid rgb(241, 242, 244); height: 43px; text-align: center; font-size: 12px; } .theader { td { background-color: rgb(229, 236, 246); } .w100 { width: 100px; position: relative; border-top-left-radius: 12px; .s1 { position: absolute; left: 10px; top: 14px; } .s2 { position: absolute; right: 10px; top: 3px; } p { width: 101px; height: 1px; background: rgb(255, 255, 255); transform: rotate(17deg); position: absolute; left: 1px; top: 17px; } } } } } </style>