一个5*2列数据显示纯css表格宽度自适应，用于表格数据显示

2021-08-25 网页编程网 网页编程网

5列*2、6列*2或7列*2，只需修改css中的width即可。

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
/**div 5*2列表格*/
.divTb{
width:100%;
list-style: none;
}
.divTb li{
float:left;
border-left:1px solid black;
border-top:1px solid black;
width:13%;/*若6列表格，修改成10%；7列则8%*/
height: 33px;
line-height: 33px;
text-align: left;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
}
.divTb li.t{
width:6%;
}
.divTb li.r{
border-right:1px solid black;
}
.divTb li.b{
border-bottom:1px solid black;
}
</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>

阅读原文

阅读 3157

123 显示电脑版