java 表格小程序_一秒学会微信小程序制作table表格

大家都知道微信小程序自身没有提供表格这个组件，但是今天的项目需求又出现了，所以只能模仿一个了。

效果图：

代码挺简单方便的：

wxml:

日期

时间

伤害

2018/02/12

11:30

本次对海煞造成了100000点伤害

wxss:

.history-table-wrap{

position: absolute;

width: 668rpx;

height: 578rpx;

left: 50%;

margin-left: -334rpx;

top: 70rpx;

overflow-y: scroll;

overflow-x: hidden;

}

/* 表格代码 */

.table{

border:1px solid #dadada;

border-right:0;

border-bottom: 0;

width: 98%;

margin-left: 1%;

}

.tr{

width:100%;

display: flex;

justify-content: space-between;

}

.th,.td{

padding: 10px;

border-bottom: 1px solid #dadada;

border-right: 1px solid #dadada;

text-align: center;

width: 100%;

}

.th1,.th2,.td1,.td2{

width: 40%;

}

.th{

font-weight: 800;

background-color: #b66242;

font-size: 28rpx;

color: #330e0e;

}

.td{

font-size: 20rpx;

color: #ec9480;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。