先上个图,不同于HTML得TABLE标签制作,使用DIV+CSS也是可以制作好看的表格的哦
CSS代码如下:
.main { height: auto; border: 1px solid #ccc; border-bottom: none; margin-bottom: 10px;}.line { width: 100%; text-align: center; display: flex; justify-content: center; border-bottom: 1px solid #ccc;}.row { border-right: 1px solid #ccc; flex: 1; display: flex; justify-content: center; flex-direction: column;}.row:last-of-type{ border-right: none;}.row-item{ border-bottom: 1px solid #ccc;}.row-item:last-of-type{ border-bottom: none;}
HTML代码如下:
<div class="main"> <div class="line"> 乙方 </div> <div class="line"> <div class="row"> 收费 </div> <div class="row"> <div class="row-item">总计</div> <div class="row-item">支付日</div> </div> <div class="row"> <div class="row-item">10元</div> <div class="row-item">15号</div> </div> </div> </div>
本文地址:https://www.moyublog.com/notes/1207.html
加入我们:微信:搜索“Moyu-Blog” 帝国CMS模板客户群:QQ二群---909235407 QQ一群(已满)---106997031
版权声明:本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载请注明本文地址!