微信小程序自定义表格样式

样式一

复制代码
.table3_tr {
  display: flex;
  width: 100%;
  font-size: 25rpx;
  color: black;
  text-align: center;
}
.table3_td {
  display: flex;
  align-items: center;
  // justify-content: center;
  height: 60rpx;
  border-bottom: 1rpx solid rgb(220, 220, 220);
  border-right: 1rpx solid rgb(220, 220, 220);
  padding-left: 10rpx;
}
.table3LBlack{
color: black;
font-size: 28rpx;
  width: 25%;
}
.table3RBlack{
  color: black;
font-size: 28rpx;
  width: 75%;
}
.table3LName{
color: #5A5A5A;
font-size: 28rpx;
  width: 25%;
}
.table3RTxt{
color: black;
font-size: 28rpx;
  width: 75%;
}
.table3BlueTxt{
color: #2A67EA;
font-size: 28rpx;
  width: 75%;
}
.table3huiTxt{
color: #BBBBBB;
font-size: 28rpx;
  width: 75%;
}
.lineHui{
  width: 100%;
  height: 10rpx;
  background: #DBDBDB;
}

    <view  >
        <view class="tab3Table">
          <view class="table3View">
            <view class="table3_tr">
              <view class="table3_td table3LName">项目编号</view>
              <view class="table3_td table3RTxt">001</view>
            </view>
            <view class="table3_tr">
              <view class="table3_td table3LName">产品名称</view>
              <view class="table3_td table3RTxt">左侧板</view>
            </view>
                <view class="table3_tr">
              <view class="table3_td table3LName">物料名称</view>
              <view class="table3_td table3RTxt"> 18mm象牙白颗粒板</view>
            </view>
                <view class="table3_tr">
              <view class="table3_td table3LName">长宽厚</view>
              <view class="table3_td table3RTxt"> 500/234/18</view>
            </view>
                <view class="table3_tr">
              <view class="table3_td table3LName">数量</view>
              <view class="table3_td table3RTxt">  1</view>
            </view>
                 <view class="table3_tr">
              <view class="table3_td table3LName">面积</view>
              <view class="table3_td table3RTxt">  0.34m²</view>
            </view>
               <view class="table3_tr">
              <view class="table3_td table3LName">附件</view>
              <!-- table3huiTxt -->
              <view class="table3_td table3BlueTxt">
                <view>查看图片</view>
                <view style="margin-left:20rpx;">查看视频</view>
                </view>
            </view>
              <view class="table3_tr">
              <view class="table3_td table3LName">情况说明</view>
              <view class="table3_td table3RTxt">  工厂做错了</view>
            </view>
<view class="lineHui"></view>
          </view>
        </view>
      </view>

样式二

复制代码
 <view class="table2View">
              <view class="table_header1">
                <view class="th2_1">子单名称</view>
                <view class="th2_1">平方数</view>
                <view class="th2_1">材质</view>
                <view class="th2_1">颜色</view>
                <view class="th2_1_1">状态</view>
              </view>
              <view wx:for="{{ AuditList }}" wx:for-item="item1" wx:key="key">
                <view class="table2_cell">
                  <view class="th2_10">
                    <view class="th2_txt">{{item1.auditName?item1.auditName:''}}</view>
                  </view>
                  <view class="th2_10">
                    <view class="th2_txt"> {{item1.square?item1.square:0 }}m²</view>
                  </view>
                  <view class="th2_10">
                    <view class="th2_txt"> {{item1.baseMaterial?item1.baseMaterial :''}}</view>
                  </view>
                  <view class="th2_10">
                    <view class="th2_txt"> {{item1.decor?item1.decor:'' }}</view>
                  </view>
                  <view class="th2_10">
                    <view class="th2_txt">
                      <view wx:if="{{getPageObj.processStatus ==5}}">
                        <view class="orangeColor">
                          <view wx:if="{{item1.zmStatus == 2}}" class="orangeColor">拆单中-自审通过</view>
                          <view wx:else class="orangeColor">拆单中-自审中</view>
                        </view>
                      </view>
                      <view wx:else class="orangeColor">{{ getPageObj.processStatusName}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>

/* 表头1 --------------------*/
.table_header1 {
  display: flex;
  background-color: #eeeeee;
  justify-content: center;
  width: 100%;
  // width: 100%;
  font-size: 25rpx;
  color: black;
  text-align: center;
  font-weight: 900;
  border: 1rpx solid rgb(220, 220, 220);
}
.table2View {
  margin-top: 20rpx;
  border: 1px solid #eeeeee;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  // margin-left: 1%;
}
.th2_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  width: 33.3%;

  border-right: 1rpx solid rgb(220, 220, 220);
}
.th2_1_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  width: 33.3%;
}
/* 表格cell */
.table2_cell {
  display: flex;
  justify-content: space-between; /* 项目位于各行之间留有空白的容器内。 */
  width: 100%;
  font-size: 25rpx;
  color: black;
  text-align: center;
}

.th2_10 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 60rpx;
  width: 20%;
  border-bottom: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
}
.th2_txt {
  overflow: hidden; //超出的文本隐藏
  display: -webkit-box;
  -webkit-line-clamp: 3; // 超出多少行
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.orangeTxt {
  color: #f9b22d;
}
.Tips {
  margin-top: 20rpx;
  color: rgba(16, 16, 16, 1);
  font-size: 28rpx;
}
.TipsRed {
  color: red;
  font-size: 28rpx;
}
.martop {
  margin-top: 30rpx;
}
相关推荐
狂团商城小师妹9 小时前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
说私域11 小时前
情绪点设置在开源AI大模型驱动的S2B2C商城小程序AI智能名片中的应用研究
人工智能·小程序·开源
2501_9160074713 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
流***陌14 小时前
扭蛋机抽赏小程序:重构线上娱乐的“盲盒式”新体验
小程序·重构·娱乐
一 乐14 小时前
社区互助养老系统|基于java和小程序的社区互助养老系统小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·社区互助养老系统小程序
lingggggaaaa14 小时前
小迪安全v2023学习笔记(九十讲)—— 小程序篇&反编译&外在&主包分包&配置泄露&算法逆向&未授权
笔记·学习·安全·web安全·网络安全·小程序
说私域14 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的文案信息传达策略研究
大数据·人工智能·小程序
计算机毕业设计小帅14 小时前
【2026计算机毕业设计】基于Springboot的汉服交流的微信小程序
spring boot·微信小程序·课程设计