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

当前位置：主页 >> 网页特效 >> 正文

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

阅读：2287 输入：2021-08-03 20:28:44

用于数据显示，共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>

上一篇：javascript用position:sticky实现table表头固定，冻结表头
下一篇：多个window.onload，只运行最后一个的解决方案

相关阅读: js实现的表头列头固定页面源码; 一个5*2列数据显示纯css表格宽度自适应，用于表格数据显示; css设计table表格边框综合案例；只显示内边框