义乌外贸建网站网址服务器查询

微信小程序没有table标签，运用display:table和display:flex实现一个内容字数不固定表格……

wxml：

<view class="ContentShow">
<view class="conht">烟台市新闻发布会登记审批表</view>
<view class="table">
<view class="tr">
<view class="td">新闻发布会名称</view>
<view class="td">{{ContentData.title}}</view>
</view>
<view class="tr">
<view class="td">发布单位</view>
<view class="td">{{ContentData.name}}</view>
</view>
<view class="tr">
<view class="td">发布人姓名、职务</view>
<view class="td">{{ContentData.publisher}}、{{ContentData.publisher_post}}</view>
</view>
<view class="tr">
<view class="td">主持人姓名、职务</view>
<view class="td">{{ContentData.host}}、{{ContentData.host_post}}</view>
</view>
<view class="tr">
<view class="td">媒体发布范围</view>
<view class="td">{{ContentData.nrangeame}}</view>
</view>
<view class="tr">
<view class="td">发布会举办时间</view>
<view class="td">{{ContentData.start_time}}至{{ContentData.end_time}}</view>
</view>
<view class="tr">
<view class="td">发布会举办地点</view>
<view class="td">{{ContentData.place}}</view>
</view>
<view class="tr">
<view class="td">是否报经分管市领导同意</view>
<view class="td">{{ContentData.place}}</view>
</view>
<view class="trOne">
<text>发布会主要内容</text>
<rich-text nodes="{{ContentData.content}}"></rich-text>
</view>
<view class="trTwo">
<view class="colus">
<text class="txtLine">主管部门意见</text>
<view class="coluCont"><text>(盖章)  年 月 日</text>
</view>
</view>
<view class="colus">
<text class="txtLine">市政府新闻办意见</text>
<view class="coluCont"><text>(盖章)  年 月 日</text>
</view>
</view>
</view>
<view class="tr">
<view class="td">主要负责任人、联系方式</view>
<view class="td">{{ContentData.chargeperson_main}}</view>
</view>
<view class="tr" style="display:{{returnReason}}">
<view class="td">驳回原因</view>
<view class="td">{{ContentData.reason}}</view>
</view>
</view>
</view>

wxss：

.table{border-left:1px solid #666;border-top:1px solid #666;font-size:.9rem;line-height:1.6rem;color:#666;margin:1.5rem 1.5rem 1rem 1.5rem;}
.tr{width:100%;display:table;}
.td{padding:0.2rem 0.5rem;text-align:center;box-sizing:border-box;display:table-cell;vertical-align:middle;}
.tr view:nth-child(1){width:30%;}
.tr view:nth-child(2){flex:1;width:70%;}.trOne{border-right:1px solid #666;box-sizing:border-box;padding:0.5rem;border-bottom:1px solid #666;}
.trOne text{display:block;text-align:center;padding-bottom:.5rem;}.trTwo{display:flex;justify-content:space-between;box-sizing:border-box;}
.colus{flex:1;}
.txtLine{display:block;text-align:center;border-bottom:1px solid #666;}
.coluCont{min-height:5rem;align-items:flex-end;display:flex;}
.coluCont text{display:block;text-align:right;width:100%;padding-right:0.5rem;box-sizing:border-box;}.td,.colus{border-bottom:1px solid #666;border-right:1px solid #666;}