微信小程序實現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.pswp.cn/bicheng/77332.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/77332.shtml
英文地址,請注明出處:http://en.pswp.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;支持數據庫、文檔庫、…