微信小程序实现table表格

微信小程序没有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;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/87502.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/87502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 基本面试题

目录 一、SQL的基本操作 1、SQL查询的执行顺序 2、count(*)、count(1) 、count(列名) 的区别 3、char 和 varchar 的区别 4、MySQL 中常用的基础函数 5、MySQL的执行流程 6、MyISAM和InnoDB的区别 二、事务 1、事务的基本概念 2、事务的四大特性&#xff08;ACID) 3…

WPF学习笔记(12)下拉框控件ComboBox与数据模板

下拉框控件ComboBox与数据模板 一、ComboBox1. ComboBox概述2. ItemsControl类3. Selector类4. ComboBox类 二、ComboBox数据模板总结 一、ComboBox 1. ComboBox概述 ComboBox类代表一个有下拉列表的选择控件&#xff0c;供用户选择。 官方文档&#xff1a;https://learn.mic…

Docker for Windows 设置国内镜像源教程

在使用 Docker 时&#xff0c;由于默认的 Docker Hub 镜像源位于国外&#xff0c;国内用户在拉取镜像时可能会遇到速度慢或连接不稳定的问题。为了加速镜像拉取&#xff0c;可以将 Docker 配置为使用国内镜像源。以下是适用于 Windows 系统的详细配置方法&#xff1a; 方法一&…

一键部署AI工具!用AIStarter快速安装ComfyUI与Stable Diffusion

AIStarter部署AI工具&#xff0c;让AI开发更简单&#xff01;无需研究复杂环境配置&#xff0c;AIStarter平台提供一键安装ComfyUI和Stable Diffusion&#xff0c;支持多版本选择&#xff0c;快速上手。以下是详细步骤&#xff1a; 一、访问AIStarter市场 下载AIStarter&#x…

Python基础(吃洋葱小游戏)

下面我将为你设计一个"吃洋葱小游戏"的Python实现方案&#xff0c;使用Pygame库开发。这个游戏模拟吃洋葱的过程&#xff0c;玩家需要收集不同种类的洋葱以获得高分&#xff0c;同时避免吃到辣椒。 &#x1f9c5; 吃洋葱小游戏 - Python实现方案 &#x1f3ae; 1. …

Objective-C 路由表原理详解

在 Objective-C 中实现路由表是组件化架构的核心&#xff0c;它通过 URL 映射机制实现模块间解耦通信。以下是完整实现原理&#xff1a; 一、核心架构设计 #mermaid-svg-5jMinPiZe8mivAbi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fil…

通过交互式网页探索传输现象-AI云计算数值分析和代码验证

传输过程涉及质量、动量和能量等物理量在各种系统中的基本运动和转移&#xff0c;主要分为动量传输、热量传输和质量传输&#xff0c;在工程、环境科学、生物学和物流等领域至关重要。 传输过程是指物理量&#xff08;如质量、动量和能量&#xff09;在物理、化学、生物或工程系…

使用Rust原生实现小波卡尔曼滤波算法

一、算法原理概述小波变换&#xff08;Wavelet Transform&#xff09;通过多尺度分解将信号分为高频&#xff08;细节&#xff09;和低频&#xff08;近似&#xff09;部分&#xff0c;高频通常包含噪声&#xff0c;低频保留主体信息。使用Haar小波&#xff08;计算高效&#x…

leetcode 3304. 找出第 K 个字符 I 简单

Alice 和 Bob 正在玩一个游戏。最初&#xff0c;Alice 有一个字符串 word "a"。 给定一个正整数 k。 现在 Bob 会要求 Alice 执行以下操作 无限次 : 将 word 中的每个字符 更改 为英文字母表中的 下一个 字符来生成一个新字符串&#xff0c;并将其 追加 到原始的…

数字人分身+矩阵系统聚合+碰一碰发视频: 源码搭建-支持OEM

以下是关于数字人分身、矩阵系统聚合及碰一碰发视频功能的源码搭建与OEM支持的方案整理&#xff1a;核心技术模块数字人分身技术 使用深度学习框架&#xff08;如PyTorch或TensorFlow&#xff09;训练生成对抗网络&#xff08;GAN&#xff09;或变分自编码器&#xff08;VAE&am…

【LeetCode 热题 100】189. 轮转数组——(解法一)额外数组

Problem: 189. 轮转数组 题目&#xff1a;给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 文章目录 整体思路完整代码时空复杂度时间复杂度&#xff1a;O(N)空间复杂度&#xff1a;O(N) 整体思路 这段代码旨在解决一个经典的…

【PyCharm 2025.1.2配置debug】

大家先看下我的配置 1.调试配置 选择 FastAPI 框架名称-》 自定义应用程序文件&#xff1a;必须选择当前项目的main.pyUvicorn 选项&#xff1a;这是启动命令&#xff0c;有第三步的选择 main.py 所以只需要–reload即可&#xff0c;如果想自定义启动端口补充–port xxxxPytho…

Python数据库软件:查询与预测功能集成系统

Python数据库软件:查询与预测功能集成系统 概述 本文将详细介绍一个具备查询和模型预测功能的Python数据库软件的设计与实现。该系统基于Python开发,使用Excel作为数据存储格式,包含约15个功能页面,支持数据管理、查询分析、模型预测等核心功能。 系统架构 技术栈 核心…

什么是持续集成/持续交付(CI/CD)?

基本概念 CI/CD旨在通过自动化流程提高代码质量、加快发布速度 CI &#xff08;Continuous Integration&#xff0c;持续集成&#xff09;CD&#xff08;Continuous Delivery/Deployment&#xff0c;持续交付/持续部署&#xff09; CI 持续集成 目标 频繁加粗样式将代码合…

核弹级漏洞

CVE-2025-6018 漏洞介绍&#xff1a; 该漏洞是Linux PAM&#xff08;可插拔认证模块&#xff09;中的一个本地权限提升漏洞&#xff0c;主要存在于openSUSE Leap 15和SUSE Linux Enterprise 15的PAM配置中。由于PAM规则错误地将检查条件设置为用户存在SSH或TTY会话&#xff0c…

LabVIEW自动扶梯振动监测

利用LabVIEW开发平台构建自动扶梯机械振动数据采集系统&#xff0c;实现驱动主机、减速器、梯级等关键部位的振动信号实时采集、频谱分析、数据存储及故障特征提取。系统通过加速度传感器与高速数据采集卡的协同工作&#xff0c;结合 LabVIEW 图形化编程的高效数据处理能力&…

PTA最少交换次数

最少交换次数 分数 15 作者 計科G隊長 单位 重庆大学 长度为N的数组中只有1&#xff0c;2&#xff0c;3三种值&#xff0c;要按升序排序&#xff0c;并且只能通过数值间的两两交换实现不能移位。比如某项竞赛的优胜者按金银铜牌排序&#xff0c;或者荷兰国旗问题都是该问题…

LiteHub中间件之跨域访问CORS

跨域访问CORS 原理基本概念简单请求非简单请求&#xff08;预检请求&#xff09; 代码实现服务器端Cors的关键配置服务端解析预检请求服务端填充响应 抓包分析 原理 基本概念 在浏览器安全模型中&#xff0c;同源策略是最重要的安全基石。 一个“域”是由3个要素组成的&#…

FastAPI开发教程

FastAPI 是一个现代、高性能的 Python Web 框架&#xff0c;专为构建 APIs 设计。它基于 Python 类型提示&#xff0c;支持异步编程&#xff0c;并提供自动生成的交互式文档&#xff08;Swagger UI 和 ReDoc&#xff09;。以下是 FastAPI 开发的核心指南&#xff1a; 1. 安装 …

基于Spring Boot + MyBatis-Plus + Thymeleaf的评论管理系统深度解析

你好呀&#xff0c;我是小邹。 个人博客系统日渐完善&#xff0c;现在的文章评论以及留言数量逐渐增多&#xff0c;所以今天重构了管理后台的评论列表&#xff08;全量查询 -> 分页条件搜索&#xff09;。 示例图 网页端手机端一、系统架构设计与技术选型 系统采用前后端分离…