一个5*2列数据显示纯css表格，用于表格数据显示最简代码

2021-08-03 网页编程网 网页编程网

用于数据显示，共5*2列多行最简代码，显示超长时省略号表示。增加行数时，只需用t类即可。

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
/**div 5*2列表格*/
.divTb{
width:1370px;/*1460,199*/
list-style: none;
}
.divTb li{
float:left;
border-left:1px solid black;
border-top:1px solid black;
width:190px;/*149px内空+1px外框*/
height: 33px;
line-height: 33px;
text-align: left;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
}
.divTb li.t{
width:80px;
}
.divTb li.r{
border-right:1px solid black;
}
.divTb li.b{
border-bottom:1px solid black;
}
/**E div 表格*/
</style>
<ul class="divTb">
<li class="t">客户订单号</li><li>8A003</li><li class="t">-</li><li></li><li class="t">-</li><li></li><li class="t">卖方</li><li>The Crfdfddffddfdfdfdffdfddffddfety Pty Ltd</li><li class="t">买方</li><li class="r">xxxxUSEALfdfdfdfdfdfdfdfdfdUSE</li>
<li class="t b">参考号</li><li class="b">AUG</li><li class="t b">商品名</li><li class="b">-</li><li class="t b">商品名</li><li class="b">-</li><li class="t b">SKU</li><li class="b">-</li><li class="t b">最晚收货</li><li class="r b"></li>
</ul>
</body>
</html>

阅读原文

阅读 2340

123 显示电脑版