欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

相关标签: CSS