DIV+CSS写的表格(Table)
程序员文章站
2022-03-27 08:57:28
...
话不多说,直接上代码!
<style>
.table-h{width: 100%; height: auto;}
.table-h li{width: 100%;clear: both; display:inline-block;}
.table-h .div_li {float: left;height: 40px; line-height: 40px;border-bottom: 1px solid #eaeaea; text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.table-h li:nth-child(2n+1){background-color: #f8f8f8;}
.table-h .w1{width: 36%;}
.table-h .w2{width: 18%;}
.table-h .w3{width: 18%;}
.table-h .w4{width: 9%;}
.table-h .w5{width: 9%;}
.table-h .w6{width: 10%;}
.table-h .nav{background-color: #eeeeee; font-weight: 100; font-size: 16px;}
</style>
<!--table s-->
<div class="table-h">
<ul>
<li>
<div class="div_li nav w1">编号</div>
<div class="div_li nav w2">类型</div>
<div class="div_li nav w3">操作人</div>
<div class="div_li nav w4">走向</div>
<div class="div_li nav w5">金额</div>
<div class="div_li nav w6">时间</div>
<div class="div_li nav w6">操作</div>
</li>
<!--loop s-->
<li>
<div class="div_li w1">202101280924423391</div>
<div class="div_li w2">支付宝消费</div>
<div class="div_li w3">shghnn</div>
<div class="div_li w4">支出</div>
<div class="div_li w5">9999.01</div>
<div class="div_li w6">2021-01-28</div>
<div class="div_li w7"><a class="btn_d" href="#">详情</a></div>
</li>
<!--loop e-->
<li>
<div class="div_li w1">202101280924423391</div>
<div class="div_li w2">支付宝消费</div>
<div class="div_li w3">shghnn</div>
<div class="div_li w4">支出</div>
<div class="div_li w5">9999.01</div>
<div class="div_li w6">2021-01-28</div>
<div class="div_li w7"><a class="btn_d" href="#">详情</a></div>
</li>
<li>
<div class="div_li w1">202101280924423391</div>
<div class="div_li w2">支付宝消费</div>
<div class="div_li w3">shghnn</div>
<div class="div_li w4">支出</div>
<div class="div_li w5">9999.01</div>
<div class="div_li w6">2021-01-28</div>
<div class="div_li w7"><a class="btn_d" href="#">详情</a></div>
</li>
</ul>
</div>
<!--table e-->
推荐阅读
-
JS实现动态生成html table表格的方法分析
-
我用ASP写的m行n列的函数,动态输出创建TABLE行列
-
bootstrap table 数据表格行内修改的实现代码
-
vue element table 表格请求后台排序的方法
-
微信小程序实现的绘制table表格功能示例
-
jQuery实现table表格信息的展开和缩小功能示例
-
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
-
vue项目中将element-ui table表格写成组件的实现代码
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
vue elementUI table表格数据 滚动懒加载的实现方法