当前位置: 首页 > >

微信小程序表格的实现(纯css 表格的实现)

发布时间:

display:table的用法

大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css为什么不用table系表格元素呢?


1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大


2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示


3、非表格内容用table来装,不符合标签语义化要求,不利于SEO


4、table的嵌套性太多,用DIV代码会比较简洁


项目中又需要类似表格的布局怎么办呢?可以用display:table来解决


display:table系列几乎是和table系的元素相对应的,请看下表:


table(类似 )此元素会作为块级表格来显示,表格前后带有换行符。)
}

.su-th {
display: table-cell; //此元素会作为一个表格单元格显示(类似
inline-table(类似 )此元素会作为内联表格来显示,表格前后没有换行符。)此元素会作为一个或多个行的分组来显示。)此元素会作为一个或多个行的分组来显示。)此元素会作为一个或多个行的分组来显示。)此元素会作为一个表格行显示。)此元素会作为一个或多个列的分组来显示。)此元素会作为一个单元格列显示。
table-row-group(类似
table-header-group(类似
table-footer-group(类似
table-row(类似
table-column-group(类似
table-column(类似
table-cell(类似 )此元素会作为一个表格单元格显示。
table-caption

(类似

)此元素会作为一个表格标题显示。


(1)div模拟表格


HTML代码






{{list}}



{{item}}



CSS代码--使用的是scss格式


// css表格实现
.su-table-box {
height: 100%;
margin: 0rpx 30rpx;
overflow-x: auto;
padding-bottom: 40rpx;

.su-table {
margin-top: 50rpx;
display: table;
border-collapse: collapse; //合并边框
overflow-x: auto;
// 宽度不能设置,要完全显示可以用
word-break: keep-all;
// 设置不换行
white-space: nowrap;
background-color: #FFFFFF;
}

.su-tr {
display: table-row; //此元素会作为一个表格行显示(类似


height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 1rpx solid #DDDDDD;
border-right: none;
border-bottom: none;
background-color: #87CEFA;
color: #FFFFFF;
}

.su-td {
padding: 0rpx 30rpx;
display: table-cell; //此元素会作为一个表格单元格显示(类似

height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 1rpx solid #DDDDDD;
border-right: none;
}
}

JS代码


data() {
return {
// 表格标题
th: ["姓名", "手机号", "所属社区", "性别", "昵称", "住址", "备注信息", "生成编号"],
// 表格内容 这里只能使用 数组套数组格式
td: [
[
"滴滴滴",
"18399997777",
"多喝水",
"中性",
"护手霜",
"好的好的记得记得你电话",
"湖南省长沙市岳麓区",
"SCV00000001"
],
[
"滴滴滴2",
"18399997777",
"多喝水",
"中性",
"护手霜",
"好的好的记得记得你电话哈哈哈",
"湖南省长沙市岳麓区",
"SCV00000001"
],
[
"滴滴滴3",
"18399997777",
"多喝水",
"中性",
"护手霜",
"好的好的记得记得你电话",
"湖南省长沙市岳麓区",
"SCV00000001"
],
[
"滴滴滴4",
"18399997777",
"多喝水",
"中性",
"护手霜",
"好的好的记得记得你电话",
"湖南省长沙市岳麓区",
"SCV00000001"
]
],

}
},

效果展示:



?


?


?



友情链接: