微信小程序实现table样式,自带合并行合并列

微信小程序在代码编写过程好像不支持原生table的使用,在开发过程中偶尔又得需要拿table来展示。

1.table效果展示

1.wxml

 <view class="table-container"><view class="table"><view class="table-row"><view class="table-cell" style="grid-row: span 2; ">序号</view><view class="table-cell" style="grid-row: span 2; ">税种</view><view class="table-cell " style="grid-column: span 5;">税 率</view></view><view class="table-row"><view class="table-cell">中国</view><view class="table-cell" style="grid-column: span 2; grid-column: span 3;">老挝其他区域</view><view class="table-cell">老挝磨丁经济特区</view></view><view class="table-row"><!-- 这个单元格是空的,因为行合并已经在上一行处理 --><view class="table-cell">1</view><view class="table-cell">增值税(间接税)</view><view class="table-cell">0%—13%</view><view class="table-cell" style="grid-column: span 3;">企业在购买产品同时需额外支付产品进项价格10%的增值税</view><view class="table-cell">5%</view></view><view class="table-row"><!-- 这个单元格是空的,因为行合并已经在上一行处理 --><view class="table-cell">2</view><view class="table-cell">企业利润税(直接税)</view><view class="table-cell">5%—25%</view><view class="table-cell" style="grid-column: span 3;">按可收税利润(6000万基普以上)的35%计征。</view><view class="table-cell">0%—12%</view></view><view class="table-row"><!-- 这个单元格是空的,因为行合并已经在上一行处理 --><view class="table-cell">3</view><view class="table-cell">个人所得税(直接税)</view><view class="table-cell">3%—45%</view><view class="table-cell" style="grid-column: span 3;">薪金、劳务费、动产和不动产所得、知识产权、专利、商标所得等必须缴纳所得税,具体税率以30万基普为起征点,30万—150万基普为5%、150万—400万基普为10%、400万—800万基普为15%、800万—1500万基普为20%、1500万基普以上为25%。外国人按总收入的</view><view class="table-cell">5%</view></view><view class="table-row"><!-- 这个单元格是空的,因为行合并已经在上一行处理 --><view class="table-cell">4</view><view class="table-cell">营业税(间接税)</view><view class="table-cell">1.2%—12%</view><view class="table-cell" style="grid-column: span 3;">个人、法人或者机构在老挝境内进行商品买卖和服务时必须按比例缴纳营业税(部分免税商品除外),缴纳比例一般为5%和10%,但出口商品免缴营业税。</view><view class="table-cell">0.5%</view></view></view></view>

2.css样式

.table-container {display: flex;justify-content: center;margin-top: 20px;
}.table {display: grid;grid-template-columns: repeat(7, 1fr);/* 三列布局 */gap: 1px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;/* border: 1px solid #ccc; */
}.table-row {display: contents;/* 让子元素直接参与网格布局 */
}.table-cell {border: 1px solid #ddd;padding: 8px;background-color: #fff;border-right: none;border-bottom: none;display: grid;place-items: center;
}

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

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

相关文章

前端面试-React篇

核心概念与虚拟DOM React的虚拟DOM如何工作&#xff1f;Diff算法优化策略是什么&#xff1f;JSX的本质是什么&#xff1f;与模板引擎&#xff08;如Vue&#xff09;有何区别&#xff1f;React组件生命周期&#xff08;类组件&#xff09;的关键阶段是什么&#xff1f;受控组件…

LFM调制信号分类与检测识别

LFM调制信号分类与检测识别 LFM调制信号分类识别AlexNet网络识别InceptionV3、ResNet-18、ResNet-50网络识别 LFM调制信号检测识别 LFM调制信号分类识别 支持识别LFM信号、间歇采样干扰(ISRJ)、灵巧噪声干扰(SNJ)、扫频干扰(SJ)、瞄准干扰(AJ)、阻塞干扰(BJ)、密集假目标干扰(…

Linux 常用命令总结

Linux 常用命令总结 Linux 命令行是系统管理和开发的核心工具&#xff0c;掌握常用命令可以极大提升效率。本文全面总结 Linux 常用命令&#xff0c;涵盖文件操作、进程管理、网络管理、系统监控、用户管理、软件安装等多个方面&#xff0c;适合初学者和高级用户参考。 1. 文件…

RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION函数分析之创建一个RPCRT4!OSF_CCALL--RPC源代码分析

RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION函数分析之创建一个RPCRT4!OSF_CCALL 第一部分&#xff1a; 1: kd> p RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION0x167: 001b:77bf6957 393dec35c877 cmp dword ptr [RPCRT4!gfRPCVerifierEnabled (77c835ec)],edi 1: kd> …

量化视角:比特币美债黄金三角博弈的DeepSeek推演

【AI分析】近期全球金融市场呈现罕见的三重分化态势&#xff1a;比特币单日振幅超35%、美债收益率创年内最大单日波动、黄金价格突破3271美元/盎司&#xff0c;刷新有记录以来的最高价。这种极端行情背后&#xff0c;折射出AI模型捕捉到的市场结构性矛盾与资金流动新逻辑。 一…

markdown导出PDF,PDF生成目录

1、vscode中安装markdown插件&#xff0c;将编辑的文件导出PDF。 2、安装PDF Guru Anki软件 百度网盘&#xff1a;通过网盘分享的文件&#xff1a;PDFGuruAnki 链接: https://pan.baidu.com/s/1nU6avM7NUowhEn1FNZQKkA 提取码: aues PDF中不同的标题需要通过矩形框标注差异&a…

FastAPI与SQLAlchemy数据库集成

title: FastAPI与SQLAlchemy数据库集成 date: 2025/04/17 15:33:34 updated: 2025/04/17 15:33:34 author: cmdragon excerpt: FastAPI与SQLAlchemy的集成通过创建虚拟环境、安装依赖、配置数据库连接、定义数据模型和实现路由来完成。核心模块包括数据库引擎、会话工厂和声…

OSCP - Proving Grounds - DriftingBlues6

主要知识点 路径爆破dirtycow内核漏洞提权 具体步骤 总体来讲&#xff0c;这台靶机还是比较直接的&#xff0c;没有那么多的陷阱,非常适合用来学习 依旧是nmap开始,只开放了80端口 Nmap scan report for 192.168.192.219 Host is up (0.42s latency). Not shown: 65534 cl…

电视盒子 刷armbian

参考 中兴电视盒子中兴B860AV3.2-M刷Armbian新手级教程-CSDN博客 1.刷安卓9 带root版本 a. 下载安卓线刷包 链接&#xff1a;https://pan.baidu.com/s/1hz87_ld2lJea0gYjeoHQ8A?pwdd7as 提取码&#xff1a;d7as b.拆机短接 3.安装usbburning工具 使用方法 &#xff0c;…

Redisson分布式锁全攻略:用法、场景与要点

目录 1. 普通可重入锁&#xff08;RLock&#xff09; 2. 公平锁&#xff08;RFairLock&#xff09; 3. 读写锁(RReadWriteLock) 4. 多重锁(RedissonMultiLock) 1. 普通可重入锁&#xff08;RLock&#xff09; import org.redisson.Redisson; import org.redisson.api.RLoc…

Node.js 中 Token 原理简单介绍 + 示例代码

目录 ✅ 什么是 Token&#xff1f; &#x1f501; 原理简述&#xff1a; &#x1f9e9; 示例项目&#xff1a;使用 Node.js jsonwebtoken 实现 Token 登录验证 &#x1f4c1; 文件结构如下&#xff1a; &#x1f539; server.js&#xff08;JavaScript&#xff09; &…

每日OJ_牛客_ruby和薯条_排序+二分/滑动窗口_C++_Java

目录 ruby和薯条_排序二分/滑动窗口 题目解析 C代码 Java代码 ruby和薯条_排序二分/滑动窗口 ruby和薯条 描述&#xff1a; ruby很喜欢吃薯条。 有一天&#xff0c;她拿出了n根薯条。第i根薯条的长度为ai。 ruby认为&#xff0c;若两根薯条的长度之差在l和r之间&#xf…

从 ComponentActivity 看 Android Activity 的演变与 Jetpack 架构融合

在 Jetpack Compose 出现后&#xff0c;开发者可能会注意到一个变化&#xff1a;项目的主 Activity 默认从过去熟悉的 AppCompatActivity 变成了 ComponentActivity。这个变化并非偶然&#xff0c;而是 Android 架构在向现代组件化演进过程中一个关键的转折点。本文将围绕 Comp…

Linux 防火墙( iptables )

目录 一、 Linux 防火墙基础 1. 防火墙基础概念 &#xff08;1&#xff09;防火墙的概述与作用 &#xff08;2&#xff09;防火墙的结构与匹配流程 &#xff08;3&#xff09;防火墙的类别与各个防火墙的区别 2. iptables 的表、链结构 &#xff08;1&#xff09;规则表 …

大数据 - 2. Hadoop - HDFS(分布式文件系统)

前言 为什么海量数据需要分布式存储技术&#xff1f; 文件过大时&#xff0c;单台服务器无法承担&#xff0c;要靠数量来解决。数量的提升带来的是网络传输、磁盘读写、CPU、内存等各方面的提升。 众多的服务器一起工作&#xff0c;如何保证高效且不出错 &#xff1f; 大数…

使用cursor进行原型图设计

1.下载cursor 2.模式设置&#xff1a; 模型使用claude-3.7-sonnet的think模式 3.引导词模板&#xff1a; 我想要开发一个中高考英语口语考试的模拟考试系统&#xff0c;我需要将上面的这个应用输出成高保真的原型图设计。请考虑以下的规范&#xff1a; 用户体验&#xff1…

极狐GitLab 功能标志详解

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 功能标志 (BASIC ALL) 使用功能标志&#xff0c;您可以将应用程序的新功能小批量部署到生产环境中。您可以为部分用户打开和…

AI与无人驾驶汽车:如何通过机器学习提升自动驾驶系统的安全性?

引言 想象一下&#xff0c;在高速公路上&#xff0c;一辆无人驾驶汽车正平稳行驶。突然&#xff0c;前方的车辆紧急刹车&#xff0c;而旁边车道有一辆摩托车正快速接近。在这千钧一发的瞬间&#xff0c;自动驾驶系统迅速分析路况&#xff0c;判断最安全的避险方案&#xff0c;精…

【NLP 63、大模型应用 —— Agent】

人与人最大的差距就是勇气和执行力&#xff0c;也是唯一的差距 —— 25.4.16 一、Agent 相关工作 二、Agent 特点 核心特征&#xff1a; 1.专有场景&#xff08;针对某个垂直领域&#xff09; 2.保留记忆&#xff08;以一个特定顺序做一些特定任务&#xff0c;记忆当前任务的前…

RAGFlow本地部署教程 :多模态检索+动态生成,用AI重构企业知识生产力

RAGFlow是一款基于检索增强生成&#xff08;RAG&#xff09;技术的智能工作流平台&#xff0c;通过整合多源数据检索与生成式AI模型&#xff0c;优化企业知识管理、智能问答及自动化报告生成&#xff0c;核心功能包括&#xff1a; 多源数据融合&#xff1a;支持数据库、文档库、…