微信小程序 横向表格

<view class="horizontal-table">
        <view class="horizontal-tr">
          <view class="horizontal-td">当前待处理客诉工单</view>
          <view class="horizontal-td">{{ total }}</view>
          <view class="horizontal-td under-line" @click="handelPendingFunc"
            >点击处理</view
          >
        </view>
 </view>
//css

.horizontal-table {
  border: 1px solid #e0e6ed;
  font-size: 12px;
  margin: 0 20upx;
  margin-top: 10upx;
}
.horizontal-tr {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC-Regular, PingFang SC;
  white-space: pre-wrap;
  text-align: center;
}
.horizontal-td {
  justify-content: center;
  color: rgba(44, 63, 83, 1);
  display: flex;
  align-items: center;
  height: 100upx;
  font-size: 20upx;
  border-right: 1px solid #e0e6ed;
}
.horizontal-td:nth-child(1) {
  width: 60%;
}
.horizontal-td:nth-child(2) {
  width: 20%;
}
.horizontal-td:nth-child(3) {
  width: 20%;
}
.horizontal-td:nth-last-child(1) {
  border-right: none;
}