博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；
🍅希望此文章可以帮助到您🍅
目录
方法一：使用display:table
1：布局文件
2：css文件
3：js文件
4：问题说明
方法二：使用布局文件完成
1：布局文件
2：css文件
3：js测试数据
微信小程序文章推荐
微信小程序布局图片上面显示文字
微信小程序实现左边图片右边文字效果
微信小程序获取当前日期和时间
微信小程序绘制地图轨迹线路
微信小程序绘制marker
微信小程序之绘制多个marker以及调用手机地图软件导航
方法一：使用display:table
1：布局文件
<view class="su-table-box">
<view class="su-table">
<!-- 表格标题 -->
<view class="su-tr">
<view class="su-th" wx:for="{{th}}" wx:key="index">{{item}}</view>
</view>
<!-- 表格内容 -->
<view class="su-tr" wx:for="{{td}}" wx:for-item="tdinfo" wx:key="index">
<view class="su-td" wx:for="{{tdinfo}}" wx:key="index_">{{item}}</view>
</view>
</view>
</view>
2：css文件
.su-table-box {
height: 100%;
overflow-x: auto;
padding-bottom: 40rpx;
}
.su-table {
margin: 0 auto;
display: table;
border-collapse: collapse;
overflow-x: auto;
word-break: keep-all;
white-space: nowrap;
background-color: #FFFFFF;
width: 90%;
border-radius: 20rpx;
}
.su-tr {
display: table-row;
}
.su-th {
display: table-cell;
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;
}
3：js文件
data: {
// 表格标题
th: ["时间", "得分"],
// 表格内容 这里只能使用 数组套数组格式
td: [
[
"2021-11-03 13：36",
"10"
],
[
"2021-11-03 13：36",
"56"
],
],
4：问题说明
使用这种方式绘制的表格在开发者工具显示的是没有问题的，以及在Android真机运行也没有问题；但是在ios真机上运行不显示表格界面信息；
方法二：使用布局文件完成
1：布局文件
<!-- 绘制表格 -->
<view style="margin-top: 25rpx;">
<view style="display: flex;flex-direction: row;justify-content: space-around;">
<view class="tableTou">
姓名
</view>
<view class="tableTou">
上车时间
</view>
<view class="tableTou">
下车时间
</view>
<view class="tableTou">
详细
</view>
</view>
<view wx:for="{{dateData}}" wx:key="{{index}}" data-index="{{index}}" bindtap="lookCompany" >
<view style="display: flex;flex-direction: row;justify-content: space-around;">
<view class="tableTR">
{{item.name}}
</view>
<view class="tableTR">
08:00:00
</view>
<view class="tableTR">
08:00:00
</view>
<view class="tableTR">
查看
</view>
</view>
</view>
</view>2：css文件
.tableTou {
border: 1rpx solid #ddd;
width: 25%;
display: flex;
background-color: #1ca8fd;
height: 55rpx;
justify-content: center;
align-items: center;
}
.tableTR {
border: 1rpx solid #ddd;
width: 25%;
display: flex;
background-color: #f3f3f3;
height: 55rpx;
justify-content: center;
align-items: center;
}3：js测试数据
dateData: [
{ "name": "王小明" },
{ "name": "王小花" },
{ "name": "王小豪" },
{ "name": "王小可" },
{ "name": "王小哦" },
],留个脚印吧
大家要是感觉此篇文章有意义；那就给个关注、点赞，收藏吧；文章来源：https://www.toymoban.com/news/detail-752436.html
🍅也可以关注文档末尾公众号🍅文章来源地址https://www.toymoban.com/news/detail-752436.html
到了这里，关于微信小程序绘制表格界面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
