微信小程序实现table表格_小程序 table表格

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

wxml：

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

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;}