当前位置：首页 > news >正文

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

news 来源：原创 2025/4/30 13:04:30

微信小程序在代码编写过程好像不支持原生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;
}