DIV+CSS写的表格(Table)_div+css设计表格

话不多说，直接上代码！

<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-->