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

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

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

阅读：2745 输入：2021-08-25 09:31:56

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>

上一篇：hmtl中readonly和disable的区别
下一篇：IE浏览器下javaScript直接调用系统打印机进行打印

相关阅读: css实现table表格隔行变色除表头，:nth-child(): 定义和用法; table中td内容换行和不换行; javascript用position:sticky实现table表头固定，冻结表头