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

样式一

复制代码

.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;
}